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Introducing STORM, a 
hosting platform that makes 
your agency and websites 
run smoother. 80% of our 
customers have seen a 25% 
improvement in site speeds. 
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THE WEB DESIGNER MISSION 


50 tools to make you better 


very designer and developer needs the 
right tools in their creative and/or 
coding arsenal. The pros know all the 
best tools to use and that’s exactly who 
has chosen our collection for this 
issue’s lead feature. There is a 
cornucopia of talent that will make 
your everyday workflow, faster, easier, 
and, quite simply, better. 

Included in the line-up are 50 of the best 
prototyping and build tools, frameworks, colour 
tools and fonts, web animation, methodologies 
and testing, IDEs, code playgrounds and musttry 
browser extensions. Have a good look through 
the collection and see what fits your workflow. 


Audio and sound are crucial elements if you 
want a complete online experience. Imagine an 
app without simple notification pings or a site 
without music, sound effects and ambient noise. 
They will survive without sound, but add audio to 
visuals and you have a complete experience. 
Richard Mattka explains why and how to use 
sounds, and implement them with the help of the 
<audio> tag and the Web Audio API. 

Elsewhere, we look at Progressive Web Apps 
— or PWAs, your choice --). Find out what Google's 
Workbox collection of JavaScript libraries has to 
help make it easier to build web apps which work 
Offline. Plus, we have our regular line-up of top 
tutorials and industry interviews. Enjoy the issue. 


Follow us on Twitter for all the news & conversation 
Visit our blog for opinion, freebies & more 


Welcome 


Highlight 


Wefail add a little anarchy to design with their 
distinctive and striking style. Web Designer 
finds out more. Page 36 


Video Tuition - 107 minutes of Beginner's JavaScript video guides 
from StudioWeb (www.studioweb.com) 


Assets 


-14 Midnight Photoshop filters and 6 Hi-res postcard and card 


mockups from Sparklestock (sparklestock.com) 
- Tutorial files and assets 


www -filesilo.co.uk/webdesigner 


welcome 3 


Contributors 


@ @ 9 
This issue’s panel of experts 
Welcome to that bit of the mag where we learn more 
about the featured writers and contributors... 


Steven Roberts 

Steven is a frontend designer 
and developer from 
Stockton-on-Tees. He's 
currently leading UX, Design 
and frontend at Asemblr.com. 
This issue he’s taken a deep 
dive into the tools, 
frameworks, methodologies, 
extensions and playgrounds 
as used by the pros and 
recommended for you. 

Page 44 


Choosing the right tools to work with is essential 
for any designer or developer. Discover what you 
Should be using to perfect your workflow 


Simon Jones Mark Shufflebottom Richard Mattka 


Simon has led software <i Mark is a Professor of Richard Mattka is an 


Interaction Design at 


|) engineering teams for many 
years, and is tremendously 
excited by the potential for 
service workers — the 
technology behind Workbox 
— to bridge the gap between 
native and web 
development. Page 74 


award-winning interactive 
technologist. This issue he 
explores the power of sound 
in web experiences. Dive 
into the Web Audio API, 
libraries and resources to 
take your projects to the 


Sheridan College. In this 
issue, Mark will be showing 
you how to bring images to 
life by capturing the user’s 
mouse movements and 
triggering reveal animations. 


e) 


Page 54 /\ next level. Page 66 


Daniel Crisp is a senior 
frontend developer 
currently working on 
projects for Google. This 
issue he shows how to set 
up and use a Redux data 
store within an Angular 5 
application that uses 
lazy-loading. Page 80 


Neil is a front-end developer 
and designer who has 
worked in the industry for as 
long as we can remember. 
This issue he will be 
demonstrating how you can 
use CSS, SVG and alittle bit 
of jQuery to create a tilting 
Ul hover effect. Page 58 


Frank is a frontend 
developer specialising in 
WordPress CMS, HTML5, 
CSS3 and JS. In this issue, 
he shows you how to 
employ advanced WebGL 
techniques to reveal text 
on your webpages using 
ThreeJS. Page 62 


Ta 


Tam quickly realised the 
benefits of modularisation 
during his work in the 
embedded space. He has 


mH 

~ always been interested in 
object-oriented JS, and 
considers ECMAScript 6's 


anna Leon Brown 


Leon is a freelance web Follow us! 


developer and trainer who 
assists web developers in Facebook: www.facebook.com/ 
creating efficient code for 
projects. This issue he 


recreates a host of Twitter: hitps://twitter.com/ 
techniques as inspired by 


the top-class sites seen in webdesignermag 
Lightbox. Page 16 


ed 


WebDesignerUK 


modularisation APl a 
must-discover. Page 86 
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>> PUT A PAUSE 
IN YOUR DAY 


With so many demands from work, home and family, 
there never seem to be enough hours in the day for you. 
Why not press pause once in a while, curl up with your 
favourite magazine and put alittle oasis of ‘you’ in your day. 


OX 


PRESS PAUSE 


ENJOY A MAGAZINE MOMENT 


To find out more about Press Pause, visit; 


pauseyourday.co.uk 
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Inside issue 275 


Contents 


Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch... 
steve. jenkins@futurenet.com e @WebDesignerMag e www.creativeblog.com 


O8 What's new in Firefox 60? 
The Mozilla browser gets an update and offers 
better support. Web Designer takes a look 


10 Webkit: The best must-try 
resources out there 
Discover the libraries and frameworks that 
will make your site a better place to visit 


11 Thefuture of eCommerce 
Webflow CTO and cofounder Bryant Chou talks 
about what lies ahead for shopping online 


16 Lightbox 


A showcase of inspirational sites and the 
techniques used to create them 


28 Homecomforts 
When a travel firm needed a new website design 
it went local. Web Designer finds out more 


36 Breaking the mould 
Distinctive and opinionated. Web Designer talks 
to the talented trio at Wefail 


Design faster, code quicker 
A collection of 50 must-try tools and extensions 
for the modern day designer and developer 


66 Awesome Web Audio 


Discover why you need audio and how to 
add the power of sound to your projects 


74 Progressive Web Apps 
Learn how to add offline support to your apps 
with the help of Google’s Workbox JS libraries 


92 Hosting listings 
An extensive list of web hosting companies. 
Pick the perfect host for your needs 


94 Course listings 
Want to start learning online? Check out 
what courses are out there with this list 


dade Osis tardies The power of sound Progressive Web Apps’ 


What's in the next issue of Web Designer? Why and how to add web audio How to add offline support with Workbox 
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Get the latest must-have resources and videos 
e107 minutes of Beginners Javascript 
video guides from StudioWeb 
¢14 Midnight Photoshop filters 
¢6 Hi-res postcard and card mockups 


36 _— i 
ProFile: Wefail 
Adding a little anarchy to design 


Never miss 
an issue 


Subscribe 


Turn to page 34 now 


Save on the cover price and get 
the mag delivered to your door 


The state of 
eCommerce, on the 
other hand, seems 
mired in the past 


COMMENT — Bryant Chou - p11 


I’m good 
at making 


forecasts papell 
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Lightbox: Crypton 


Introducing simple but smart effects 


Visit the online shop at 
eee Ny magazines 


‘ m@ myfavouritemagazines.co.uk 
for the latest issue, back issues and specials 


Tutorials 


Add interactive directional images 
Use the Direction-Reveal library to respond to user 
movement and animate images in different directions 


Ul tilt effect with SVG 


Introduce animated hover effects to landing pages using 
CSS, JavaScript and SVG 


Code animated text with WebGL 


Employ the power of WebGL and ThreeJS to create an 
effect that blows text away in the wind 


Web Workshop 


Ripple effects and transitions 
themustafacelik.com 

Add engagment with awe-inspiring interactive effects 
for background images 


Introduce offline support to your applications the easy 
way with Google’s Workbox JS libraries 


Learn how you can use the power of RxJS to manage 
your application’s state with Redux 


ECMAScript 6 brings a new native modularization API. 
Find out how to use it in your projects 


contents 7 


News 
CONTACT US AT: steve.jenkins@futurenet.com | @WebDesignerMag 


Header 


What does Firefox 
60 have to offer? 


The popular browser introduces a new set of features and 
support. Web Designer takes a look at whats new 


Authentication API. Again not sexy, but still 


STAT 
ATTACK 


SEARCH 
ENGINES 


Google is the 
dominant force, but 
how dominant? 


The tools, trends and news to 
inspire your web projects 


Google 


t's no secret that Google Chrome is — tostart using them as intended. There is a 


the world’s number one browser. 
But popular as it is, it still only has 
just over 57 per cent worldwide 
market share. Admittedly that is a huge 


great post by Lin Clark at https://mzl. 
la/2Gjkqy4, which gives a great overview of 
what ES modules are all about and you can 
find out more about how they can be used 


vital. To find out more about what the API is 
about head to https://mzl.la/2jPvDwJ. And 
to find out what Firefox 60 offers, in turn, 
head to https://mzl.la/2rAAI0O1. 


90.61 


Number one, as might 
be expected 


chunk of the market, and around 40 per 
cent more than its nearest competitor, 
Safari. Think of this in real terms and even 
five or ten per cent still serves millions of 
users. So when one of the major browsers, 
that isn't Chrome, gets an update it is still 
big news. And as designers and developers, 
it is still important to Know what browsers 
beyond Chrome are doing. 

Firefox sits in the major browser 
department — and is the popular choice at 
Web Designer — but we love them all of 
course. Firefox 60, the latest update at the 
time of writing, includes some noteworthy 
new additions. ES modules bring an official, 
standardised module system to JavaScript, 
but support has not been available across 
all browsers. Firefox has now joined those 
which co offer support, so now is the time 


CREATIVE BLOO 


creativeblog.com 


This one is not such a big deal but we 
always like an update that adds something 
simple and potentially attractive — it’s the 


on page 86. For a more technical view of 
what’s going on be sure you a pay a visit 
to https://mzl.la/1PY 7nnm. 


66 The latest Firefox update now 
supports the Same-Site attribute 
when setting cookies 99 


So what else does Firefox 60 bring to the 
masses? Not the sexiest of subjects, but still 
vitally important, is security. The latest 
Firefox update now supports the Same-Site 
attribute when setting cookies. This helps 
prevent a malicious site from deep-linking 
to a page. If you want to read more about 
this head over to https://mzl.la/2IsDr5t. 
Sitting in the same arena is the Web 


Microsoft’s offering not 
quite as popular 


Yahoo 


designer in us; Firefox 60 adds support for 
the paint-order CSS property — the only 
major browser which currently offers it. You 
can find out more at https://mzl.la/2rBtisr. 

If you are a Firefox lover, or a diligent 
designer and developer, you can check out 
the release list for number 60 at https:// 
developer.mozilla.org/en-US/Firefox/ 
Releases/60. 


The old stalwart still the 
third most popular 


Popular-ish Google 
alternative in Asia 


In-depth tutorials, 
expert tips, 
cutting-edge 
features, industry 


Yandex RU | 
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NS NN See en inspiration and 8 eee 0 
a opinion. Make ' : 
sure to get your S b ib Ever used this search 
5 new 3D portfolios for 2017 you must check daily dose of U SC ri e engine? We haven't 


impressive new and newly redesigned 3D portfolios for 2017. 


creativity, design 


and development. today and Save 


| 20% 


https://bit.ly/2qLxVI4 


Source: gs.statcountercom 
(correct as of April 2078) 
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Header 
Inspiration 


Sites of the month = 


2 wa 


Enlightening 
Uniqueness 


PROJECTS / 


e 
01. Amazonia Font 
Prince wrote hundreds of songs in his lifetime amazoniafont.com 
and released dozens of albums, ranging from ‘ 7 ein 
studio recordings to live albums, compilations, Inspired by the exotic wildlife of the Amazon. 


and collaborations with his many affiliated 
groups and protegés. Even with this robust 
catalog available, the world is only just 
beginning to understand the full scope of 
Prince’s work, which also included countless 


unreleased recordings. This is the start of an : 
evolving exploration of Prince's genius... 02. Barovier & Toso 
barovier.com/en 


PRINCE ieee 
DISCOGRAPHY 
ANNOTATED 03. Célia LOPEZ 


celialopez.fr 
Multiple scrolling backgrounds, 3D objects, 
interactive expanding backgrounds. 


Choose from the alphabet for more. 


Phase Two 

04. Prince discography 
princeestate.com 

A simple pop-up window on hover presents 
music, images and video from the maestro. 


Phase One 
AGE 


Graphics Colour picker Typesetter WordPress 


Robert Romanowicz 05.05.18 Scotch Kings and Queens 
bit.ly/2K5bgqc bit.ly/2I8dUeu bit.ly/2wrLw5D kingsqueens.ancorathemes.com 
Gorgeous illustrations from the very A clean, modern serif font that offers a nod A simple, straightforward single-page theme 
talented pencil of Robert Romanowicz. ee to a historic past. Great for headlines. with neatly themed sections. Includes 


eCommerce options. 
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webkit 


Discover the must-try resources that 
Will make your site a better place 


Flexbox fallbacks for popular UI solutions 
that use CSS Grid. 


CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 
and below, grid won't really work as you expect (more info here). This site is a solution for 
you so you can start to progressively enhance without fear! 


Things to Note: CSS grid allows for specified styling using the vertical area as well as 
horizontal. Flexbox doesn't allow for this, so we'll be using fixed heights in these examples. 


Feel free to play around with the CSS! To swap between implementations, use the toggles. 


Grid to Flex a 


Calendar c= 
gridtoflex.com ssa xperience Ties Ceteu® popups, dragging Or reszing schecules and 
CSS Grid is the way forward for layouts, 


however for full adoption browser 


Firefox 


Facebook. Well contained. 


Keep the rest of your life to Ht 


yourself, 


Get the Facebook Container Extension 


support is always an issue. This is where sorrow = me lee acd oe 

Grid to Flex steps in and helps out. If you | Calendar Tone.js Facebook Container 

need support for IE11 or Edge 15 or ui.toast.com/tui-calendar tonejs.github.io mzl.la/2IUqvT8 

below, so you have a complete solution, A fully featured JavaScript schedule A framework for creating interactive Want to make it harder for Facebook to 
this is the answer. Flexbox is the fallback calendar that is customisable. View daily, | music inthe browser. Provides synths, track your activity around the web. Then 
option and the site provides option for weekly, monthly dates, and resize your effects and intuitive musical abstractions | this Firefox extension/add-on from 

the more obvious layouts. schedule to fit. Plus lots more. built on top of the Web Audio API. Mozilla is the place to get started. 


TOP 5 Web conferences - July 2018 


Get yourself a seat at the biggest and best conferences coming your way soon 


desigrv 
Yontent 


3 DAY COMPERENCE 


JULY 25-27, 2018 /VANCOUVER, BC 
P FullStack 2018 - The Conf. JavaScript, 
The Conference for Designers & ee —l lhl 
Node & Internet of Things 


‘ 18 - 20 July 2018 
_Barcelona 
BOSOBVe [CURRY ON 


Content Strategists — we're 


_angular better together 


camp 


| 


Get your ticket today! days, tracks 
soma with exciting keynotes 
invited talks 


AngularCamp _§(ScotlandJS Design & Content| FullStack2018 (| CurryOn2018 


angularcamp.tech scotlandjs.com content.design bit.ly/2GOpw12 curry-on.org/2018 

A two-day developer-driven Want to learn about JavaScript A conference where designers Get three intensive days of Set in Amsterdam, Curry On is 
conference and one-day and get a bit of whisky and gin and content strategists team up. | learning and sharing from 68 ‘a conference focused on the 
workshops, brought to you tasting in as the same time? Get a day of workshops andtwo | experts who're keen to pass on intersection of emerging 

by the community. Then sign up now. days of talks. their skills and knowledge. languages and challenges’. 
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Header 
Comment 


eCommerce needs 
a Shot in the arm 


Can code-free platforms provide a much-needed catalyst to innovation? 


t’s 2018. We're at the height of innovation — and tomorrow will See us reach all-new 
heights. Technologies like self-driving cars, true artificial intelligence (AD, anthropomorphic 
robots, and privatised space travel are all right around the corner. They're so imminently 
possible that we're already seriously considering how these technologies stand to 


completely transform our civilisation. The state of eCommerce, on the other hand, 
seems mired in the past — 1997 to be exact. 

A prime example could be the comparison of a couple of reviews of top eCommerce platforms. 
Back in 1997 CNET ran a review stating: “For people who've been hanging back wondering if they 
should put their small business on the web, Viaweb’s product says, Yes, you can get involved and 
you dont need a rocket scientist to do it”. Fast forward to 2018 and PC Mag ran a review stating 
something very similar. “Shopify makes it easy to get off the ground with basic features and the 
ability to fine-tune features at a later date. Shopify is our Editors’ Choice for shopping cart tools for 
its intuitive and easy-to-navigate dashboard, and its ease of use for first-time merchants’. 

It’s almost unsettling how similar these descriptions sound. 

Over 20 years later, the emphasis remains on ease of use, speed, and accessibility to beginners. 
All noble goals that help entrepreneurs worldwide get their businesses up and running fast — and 
driving a transition to a more diverse, localised, yet global economy. 

But there’s not much said about the output of eCommerce website tools: the experience store 
owners create for shoppers, which — as any UX designer will argue — has a powerful influence over 
the success of a store and its underlying brand. 

When we do talk about the output of eCommerce tools, it tends to be about how beautiful and 
modern the templates are. It is about how easy it is to customise a theme thanks to its builtin drag 
and drop editor, and how easy it is to edit the HTML/CSS through another built-in editor. 

All of which creates a ‘design process that can be boiled down to the something simple. Once 
the user is happy with a theme, all they need to do it hit the Publish button to apply. 

Now, I’m not here to excoriate template-based site builders. There's a clear, marketconfirmed 
place for such tools in the world. Webflow itself offers a variety of templates that are ready to publish 
to the web once the content’s ready. 


Brya nt Chou But this single sentence highlights a gap in the eCommerce site build process today. | call it the 
CTO and cofounder, Webflow ‘experience gap’, because it results in the flattening, or homogenisation, of the shopper's experience. 
Webflow.com Ideally, every store you visit, whether online or IRL, should present a wholly unique experience. An 


experience infused with brand attributes in everything from the colour scheme to the voice of the 


i promotional banners, from the staff's outfits to the clarity and precision of the wayfinding system. 
Think of your favourite brick-and-mortar shopping experiences. Whether it’s a tatty, well-used 
bookstore-cafe or a freshly opened Anthropologie, the experience is unique, multi-sensory, and most 


of all, memorable. You think about these places and you can feel the bookstore’s dog-eared paper 


66 Every store YOu VISIL, between your fingers, smell the wood pulp and leather — or hear Lana del Rey pumping through 
whether Online OF IRL, the state-of-the-art sound system, almost taste the perfume of Anthropologie. 
3 


These are places where you dont just want to buy some of their wares. You want to buy into 


should represent ad wholly the whole paradigm, become part of the experience. 
; ; At Webflow, we believe you can bring that to the web. Without sacrificing most of the ease. 
UNNQUE EXDETIENCE. An We believe that you should be able to build a bespoke eCommerce store that’s shaped by its 
eCXPelhe)hCce infused product lines and manifests the brand in ways that move you. That you should be able to take 
control of the look and feel of every single element of your site — without having to master some 


with brand attributes arcane or proprietary markup language. 
in everythin 2) g 9 We believe there should be a platform that offers the best of both worlds: intuitive store 


management for the entrepreneur, balanced by speedy but powerful design tools for the designer. 
And were going to build it: webflow.com/ecommerce. 
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webkit 


Discover the must-try resources that 
Will make your site a better place 


The web has evolved. 
Finally, testing has too. 


Fast, easy and reliable testing for anything that runs in a browser. 


npm install cypress or .& Download Now 


Install Cypress for Mac, Linux, or Windows, then get started. 


@ bootstrap-themes 


< C © bootstrap-themes.github.io 


< Tests v x — 3.40 


Application 


t) }OOKS Good on mobile 


Sponsored 
mid ligu a porta felis Guismod semper. Vorb | 
l€0 risus, porta ac consectetur ac, vestibulum at eros 
+ SCROLLINTOVIEW ( Guration 


~ CLICK Dave Gamache 


Dave Gamache 
© © Aenean lacinia bibendum nulla sec consectetur 
ar vestic 1 c ta fers eur SeMmipe 
«WAIT : nd € \ sé 5 ery 


react-web-animation 
Convert web articles into printable PDFs 


Cypress 


cypress.io 
Testing is a process that every website 


GitHub Apps to automate 
and improve your workflow 


needs to go through, but the question is 


what do you use to do it? Cypress claims 
Probot 

https://probot.github.io 

This is a framework for building GitHub 
Apps in Node.js. Probot enables you to 


Simple Print 
pdf.fivefilters.org/simple-print 
This is a free service that provides an 


react-web-animation 
react-web-animation.surge.sh 


to offer ‘fast, easy and reliable testing for 
anything that runs in a browser. So what 
does it have to offer? A complete A collection of React components that 
expose the Web Animations API. 


Contains a number of examples, source 


end-to-end testing experience. Setup (no easy way to produce printable PDFs 
from web articles. Enter the URL of the 


article and press the button. 


dependencies), execute tests in real-time 
and view results via its Dashboard. 


code and create your own apps to 
code and documentation. 


TOP 5 WordPress themes 


Need to get a good-looking website up and running quickly? Try one of these themes 


automate and improve your workflow. 


BUZZNOTE 


We make awesome 
Best restaurant in town guaranteed! 


RL) Gi HANI ‘sc vquboer ber) A 
_AFTED 10 PERFECT.» 


s 


-) 


Become World of Supermode! 
New York’ 
Ay 


i) 


Phase 

bit.ly/2laOheN 

Ina band? Want to start your 
own record label? This theme 
has all the elements needed to 
make it happen. 
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Buzznote 
bit.ly/2luQiny 

A minimalist and easy-to-use 
theme. Big imagery coupled 
with serif and sans serif fonts 
equals a good-looking blog. 


resources 


Brewski 
bit.ly/2K8kWQW 

A bar-and-beer themed theme 
with big landing page images, 
neat animations and a shop 
layout for selling your beers. 


bit.ly/2laOkat 

Not quite sure what you want? 
This multi-purpose theme has a 
host of layouts to choose from 
and is fully customisable. 


Baroque 
bit.ly/2jLmiWA 
An architectual-based theme 


with a fullscreen image slider. 
Big, bold typography anda 
clean design complete the look. 


enerate 


The conference for web designers 


LONDON 
10-21 OEPIEMBER 2010 


3 DAYD UF INOIGHT AND INSPIRATION 
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BROUGHTTO YOUBY designer (jcreativesion Net 


Semplice 


Semplice is the first fully customisable 
portfolio system based on WordPress. 
Built by designers, for designers. 


2 Web Designer talks to co-founder 
¥ Tobias van Schneider 
semplice.com 


pS 


What’s the story behind Semplice? How did it come into existence? 


My co-founder, Mike, and | originally built Semplice for our personal 
portfolios. We were dreaming about a perfect design portfolio, 
completely customised with beautifully branded case studies for each 
project. No other portfolio tool out there offered what we needed, so 
we built it ourselves. We imagined other creatives felt the same way; 
as a designer you have a specific vision for your portfolio, but not 
necessarily the time or coding knowledge to make it happen. With 
Semplice, you can make it happen. 


What sets Semplice apart from other portfolio builders? 


Many portfolio builders are focused on maintaining the status quo with 
trendy templates. Semplice is focused on building with pride. You have 
the freedom and power to create a completely custom website, no 
coding required. If you do Know how to code, you can take it even 
further. Semplice is built on WordPress, so you have the power of 

the WordPress community behind you. 


What plans do you have for the future of Semplice? 


Just last year we launched our latest product, Semplice 4. We stripped 
Semplice down and built it again from scratch, streamlining the 
experience and adding a ton of helpful new features. Now we continue 
releasing new Semplice 4 updates, like our new navigation options or 
recent Unsplash integration, that make it even better. Aside from that, 
we have a big project underway for Semplice. It’s focused on our belief 
that portfolios should be a living thing, continually updated asa 
designer evolves in their career. 


5 key features ms 


Semplice 4 boasts a range Visual content editor 


of modern features for the Semplice is built on WordPress, but 
independent designer, you won’t see the WordPress CMS. 


artist or illustrator The visual drag and drop content 
editor provides a live view of your 


page as you create it. 


2. 
Mobile ready 


Your Semplice site is responsive by 
default, but you can also adjust mobile 
breakpoints straight from the desktop 

editor for seamless presentation at 

any screen size. 
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Semplice 


PORTFOLIO SHOWCASE 


MICHELA PICCHI PAWEL NOLBERT 
michelapicchi.com nolbert.com 


VERENA MICHELITSCH NOEMIE LE COZ 


verenamichelitsch.com noemielecoz.com/hello/ 
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Designer: 
Crypton https://crypton.trading Evrone hitps://evrone.com 


I*m good 
at making 
forecasts 


| analyze thousands of trading transactions and reveal patterns using my machine 


learning algorithms. Then | predict changes in certain points and signal to sell 


or buy currency. 


Technology 
Team lookup 


Contacts 


lightbox 


66 This dynamic Ruby-built site represents a cryptocurrency bot that 
utilises machine-learning algorithms to forecast profitable trading 99 


ty oh 


lightbox 


LightBox 


Colours 


#171171 #FF 2642 


#431E88 HPPPPPP 


Tools 


Ruby on Rails, 
JQuery, Bodymovin, 
Amazon CloudFront 


Fonts 


abcABC 
1254567890 
abcABC 
1254567890 


Space Mono by Colophon 
Foundry is employed in 
Regular and Bold weights 
to add the distinctive 
robotic style to the 
typography. 


abcABC 
1234567890 


Work Sans by Wei 
Huang, available via 
Google Fonts, is used 
across the subsequent 
span text snippets. 


Hello! 
I’m Cryupton| 


A cryptocurrency trading bot 
based on machine learning. 


Technology 
Team lookup 


Contacts 


Above 
The opening splash header is very utilitarian, favouring little more than stark typography to underline the robotic theme 


02:09 
@ crypton.trading 


I sell with 
max imum 
benefit 


Look at 
the results 


That is what we got on the test wallet 


Technology 
Team lookup 


Technology Contacts 


Team lookup 


Contacts 


Above 
On smaller screens the site reformats its layout accordingly 
and enjoys more control over the scrolling animations 


Above 
Scrolling the page triggers a series of data visualisations that thoughtfully 


illustrate Crypton’s various feature highlights 


lightbox 


Code an animated 
typing effect with narrative face 


Present webpage content using a typing effect, complete with an animated face 


1. Document initiation 
The first step is to initiate the structure of the webpage. 
This consists of the HTML container responsible for 
storing the head and body sections. While the head 
section's main responsibility is to load the external CSS, 
the body section will store the HTML content created in 
step 2. 

<!DOCTYPE html> 

<html> 

<head> 

<title>Typing Effect</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css"/> 

</head> 

<body> 

zkk STEP 2 HERE 

</body> 

</html> 


2. HTML content 


The HTML content consists of a container that uses 
the ‘typing’ class. This will be used by the CSS to apply 
the typing effect to any child elements. The child 
content element is made from a hl tag, but you could 
use another element such as ‘p’ to create the element 
as a paragraph. 

<div class="typing”> 

<hl>Put your title here...</h1> 
</div> 


3. CSS initiation 


Create a file called ‘styles.css’. The first step of the CSS 
defines the document and body containers to cover the 
full browser window without any visible border spacing. 
The default colours for the black page background and 
white text colours are also set in this step. Content 


elements within the page will inherit the colour set in this 


step as their default colour. 
body ,html{ 
display: block; 
width: 100%; 
height: 100%; 
background: #000; 


color: #fff; 
padding: Q; 
margin: Q; 

J 


4. Typing children 
All children within the typing container are set to display 
over one line without the use of text wrapping. Most 


importantly, these child elements have the ‘typing’ 
animation applied to them. This animation is set to play 
over 5 seconds with 50 frame snapshots - allowing for 
the staggered typing effect. 
. typing > x{ 
overflow: hidden; 
white-space: nowrap; 
animation: typingAnim 5s steps(5@); 
3 


5. Face eyes 
The effect is also accompanied by an animated face that 
appears to narrate the typed text. This step creates the 


eyes of this face as a CSS ‘virtual’ element using the ‘after’ 


selector. The eyes are placed relative to the parent text, 
with its content set as two dot text characters. 
.typing > *::after{ 

content: ". ."3 

display: block; 

position: absolute; 

top: lem; 

left: .35em; 


I 


6. Face mouth 
Like with the eyes, the face’s mouth is made from a CSS 
virtual element - this time using the ‘before’ selector. The 


mouth is positioned in relation to the parent text element, 


as well as having a border radius to appear with a 
rounded shape. The ‘typingSpeak’ animation is applied; it 
will last for O.5 seconds using two frames of animation. 
With the animation being repeated five times, the total 


LightBox 
Crypton 


animation time will be 2.5 seconds. 
.typing > *::before{ 
content: "”; 
position: absolute; 
display: block; 
top: 2.1lem; 
left: .25em; 
width: lem; 
height: .1lem; 
border-radius: 100%; 
background: #fff; 
animation: typingSpeak .5s steps(2); 
animation-iteration-count: 5; 


I 


7. Animation definitions 
This step defines the animations referenced by elements 
created in previous steps. The ‘typingAnim animation 
that has been used for the typing effect changes its 
element from no width to full width. The ‘typingSpeak’ 
animation used for the face’s mouth changes its element 
from appearing flat to more open 
@keyframes typingAnim{ 
from { width: @ } 
to { width: 100% } 
J 
@keyframes typingSpeak{ 
@% { width: lem; height: .lem } 
100% { width: lem; height: .5em; } 
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Designer: 


Creddy https://en.creddy.ru Red Collar http://redcollar.digital 


creddy 


creddy 


Quick home equity loans 


Take a loan ~ Become an investor 


lightbox 


66A modern p2p online equity lender of Russian origin, Creddy’s 
multi-lingual site unfolds colourful stylised SVG animations on scroll 99 


lightbox 


LightBox 


Colours 


#4C6AD6 #182EC4 


#BC9A8O #FA4E40 


Tools 


PHP. BITHX, 
HTML5, JavaScript 


Fonts 


abcABC 
1254567890 


abcABC 
1234567890 


abcABC 
1234567890 


The Apercu Pro font by 
Colophon is featured in 
Regular, Italic and Bold 
weights across page 
headings and quotations. 


abcABC 
1234567890 


Museo Sans Cyrillic 500 
by Jos Buivenga and Irina 
Smirnova for exlibris styles 
the site's paragraphs. 


Full name Email | Phone number Draw a loan 


Loans against the pledge of real estate for any purpose 


Above 
Stacked <div> elements containing SVG assets combine over static backgrounds, using subtle motion techniques to add life 


02:06 


@ en.creddy.ru 


oF a 
co. 
15 min 5 days up to 50m 


For application From document For any purpose 
processing submission to receiving against the pledge 


funds on your account of real estate 


Keep in touch 


Install our mobile app on a smartphone or a tablet 
and manage your finances whenever you like, 24/7. 
Invest or take loans from home. All the necessary 
information is availiable any time: payment 


schedules, statistics and much more. 


= 


Above Above 
Click the links to navigate sections and the browser windows fills with Responsive enough to look identical in smaller browsers, the site 
multi-coloured waves to smooth page transitions also promotes links to native apps for iOS and Android devices 


22 lightbox 


Create an animated header 


LightBox 
Creddy 


Use CSS keyframe animation to create independently animated elements for your web page banners 


1. Initiate HTML document 
The first step is to initiate the document with HTML. This 
consists of a document container element used to store 
the head and body sections. While the head section is 
primarily used to load the external CSS, the body is used 
to store the content elements created in step 2 

<!DOCTYPE html> 

<html> 

<head> 

<title>Animated Banner</title> 

<link rel="stylesheet” type="text/css” 

href="styles.css” /> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. HTML content 


The HTML content consists of a head element to be 
used as a container for the content elements to show. 
Each content that is to be animated uses a ‘data- 
animation’ attribute to describe which animation is to be 
applied. This attribute is picked up by the CSS in a later 
step to apply the required animation. 
<header> 
<h1 data-animation="in" 
title>Title</h1> 
<div data-animation="up"></div> 


data- 


<div data-animation="down"></div> 
</header> 


3. CSS start: header 


Create a new file called ‘styles.css’ The first step in this file 
defines how to display the header container. Its size is set 
in relation to the browser window size using the vw and 
ch unit measurements. Overflow is also set to hidden, so 
that content outside the defined size is clipped. 


header{ 
position: relative; 
width: 10Qvw; 


height: 5Qvh; 
overflow: hidden; 


I 


4. Inner elements and title 
The elements inside the header section are displayed 
using absolute positioning; appearing in relation to the 
parent header. The element with the ‘data-title’ attribute is 
Set to display 5 times bigger than the page font size. The 
‘left’ property will display it in a specific position - 10% 
from the left, while ‘z-index’ will guarantee its appearance 
above all other content. 
header > «{ 

position: absolute; 


J 

header > [data-titlel{ 
font-size: 
left: 10%; 
z-index: 99999; 

3 


5. First div child 


The div elements are used to represent where pictures 


5em; 


will appear. the ‘nth-of-type’ selector is used to select the 
first div inside the header. Use an image of your choice 
with the ‘background’ property - this example sets a 
semi-transparent colour for default visibility. The 
background is set to cover the element size defined 
through the width and height properties. 
header > div:nth-of-type(1){ 
top: 5%; 
left: 10%; 
width: 5%; 
height: 50%; 
border: 1px solid #000; 
background: url(your-image.png) 
rgba(@,255,0, .25); 
background-size: cover; 


} 
6. Second div child 


The same type of formatting is applied to the second 
div child inside the header. Unique positioning using top 
and left are applied, along with width and height for its 
size. The background colour defined by ‘rgba’ is for 
display purposes of this tutorial - so feel free to take this 
out when using your image. 
header > div:nth-of-type(2){ 

top: 20%; 

left: 40%; 

width: 5%; 

height: 50%; 


va 


-  ereddy 


background: url(your-image. png) 
rgba(@,@, 255, .25); 
background-size: cover; 


i 


7. Animation application 
Elements that have the ‘data-animation’ attribute need to 
have an associated animation applied to them. This step 
searches for these elements inside the header container 
and applies the correct animation. The settings are made 
to make the animation last for one second using ‘1s; alter 
this to change the speed of the animation. 
header Ldata-animation="up" ]{ 
animation: openUp 1s forwards; 
I 
header [data-animation="down” ]{ 
animation: openDown 1s forwards; 
3 
header Ldata-animation="in" ]{ 
animation: openIn 1s forwards; 


I 


8. Animation definitions 
The different animations are defined using just one 
keyframe - which will be the starting point for the 
animation to start ‘from’. The final animation frame will be 
the default settings created for the element in previous 
Steps 4 - 6. This allows the same animation to be applied 
to many items. 
@keyframes openUp { 
from{ top: 100%; } 
i; 
@keyframes openDown { 
from{ top: -100%; } 
J 
@keyframes openIn { 
from{ font-size: Q; } 


How does it work? 
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H R Designer: 
U U Backpack https:// huru.rocks Bachoo hitps://bachoodesign.com 


24 lightbox 


66 This boutique backpack brochure scrolls to transition between 
typography, photography, video clips and spinning product samples 99 


HOME ABOUT US BUY HURU 


THE ULTIMATE 
CITY & TRAVEL 
BACKPACK 


lb 


BUY HURU 


FACEBOOK E-MAIL INSTAGRAM CREATED BY BACHOO 


lightbox 


LightBox 


Colours 


= 


: 


#CBAC9O —«-#68986A 


#DECDB9 #646A68 


Tools 


PHP. jQuery, GSAP. 
WooCommerce 


Fonts 


ABCABC 
1234567890 


Integral CF Demi Bold, 
published by Connary 
Fagen Type Design, is the 
display sans typeface used 
across the site's headings. 


abcABC 
1234567890 


PF DIN Text Pro Regular 
by Parachute is used to 
style the nuggets of text 
found within page 
paragraphs. 
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LightBox 
HURU Backpack 


Create an inverted text swipe 
animation effect 


An effect for page titles where you can choose between changing the background style and content 


1. Initiate HTML template 
The first step is to define the template structure of the 
HTML document. This consists of the HTML document 
container, which is responsible for storing the head and 
body sections. While the head section is responsible for 
loading the external CSS stylesheet, the body section will 
be used to store the content elements created in step 2 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8" /> 

<meta http-equiv="X-UA-Compatible” 

content="IE=edge"”> 

<meta name="description” 

content="description”> 

<title>Typewriter Effect</title> 

<link rel="stylesheet” type="text/css” 

media="screen” href="styles.css”/> 

</head> 

<body> 

*kk STEP 2 HERE 

</body> 

</html> 


2. HTML content 


The HTML content consists of individual headings with 


the ‘swipe’ class used as containers for the animated text. 


Each heading has two first level children - the first being 
visible by default, with the second being the text to 
transition into. The first element needs to have its text 
contained with another container for reasons of the CSS. 
<h1 class="swipe”> 
<span><span>Same text.</span></span> 
<span>Same text</span> 
</h1> 
<h1 class="swipe”> 
<span><span>Some text.</span></span> 
<span>Different text.</span> 
</h1> 


3. CSS initiation 


Create a new file called ‘styles.css. This step initiates the 
document to display with a red coloured background 
that covers the full soace of the window. Additionally, the 
padding property is eliminated to ensure that no visible 
border spacing is presented around the sides of the web 
page window area. 
body ,html{ 

display: block; 

width: 100%; 

height: 100%; 
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background: #f2Q; 
padding: Q; 
3 


4. Swipe container 
Each container element using the ‘swipe’ class is 
required to use relative positioning and to be displayed 
with a set height. The height set to lem will show the 
element with the same height as the text characters it 
will display. These settings are important for the CSS 
defined in following steps. 
. Swipe{ 
position: relative; 
height: lem; 
5 


5. Swipe children defaults 
All of the first level children inside the swipe containers 
are required to have a set of default properties for the 
effect to work. These include absolute positioning so that 
they can be positioned at the top of their container. It’s 
important for these items to be floated to the right for 
their animation to work. 
.Swipe > x{ 

position: absolute; 

display: block; 

overflow: hidden; 


width: 100%; 
height: lem; 
color: #0Q0Q; 


background: #fff; 
white-space: nowrap; 
float: right; 

top: Q; 

margin: Q; 


6. Swipe child one 
The nth-child selector is used to apply specific styles to 
the first element that appears within the swipe container. 
While the outer container uses an animation to push the 
black box forwards, the inner container uses an 
animation to pull its inside text backwards. This keeps the 
text positioned in the same place while the black 
background swipes forward to reveal the second level 
child element. 
Swipe *:nth-child(1){ 
position: relative; 
color: #fff; 
background: #0QQ; 
animation: outer 5s forwards; 
3 
.Swipe *:nth-child(1) > «f{ 
display: block; 
z-index: 3; 
width: 100%; 
float: right; 
animation: inner 5s forwards; 


I 


7. Animation definitions 

The final step is to define the animations required for step 
6. The outer element is animated by changing its width 
from 100% to O - hence the importance of it being 
floated right in step 5. The inner animation needs to pull 
the text backwards, which is achieved by increasing its 
width to double the size of its container. 


@keyframes outer{ 

from { width: 100%; } 

to { width: @; } } 
@keyframes inner{ 

from { width: 100%; } 

to { width: 200%; color: #000;} } 
KKK 
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When award-winning 
travel specialists 
Inside Asia Tours Lid 


if 
requested a new —_ 
web experience Se 
celebrating exotic — 
away days, they kept B | » 
it local with a GFMe 
standout agency 
close fo their hearts shown ED comm 


| would like to Visite, 


Vietnam 


odia.& Laos 


When to Travel 


To help you decide the best time of year to travel to Japan, Vietnam, Cambodia & 
l or Burma, we have put together a comprehensive weather and event guide. 
Please choose your preference below to begin! 


| would like to visit... 


Show me  GReSD oweartHer in JANUARY v SHOW ME > 


When fo Travel 
insideasiatours.,com/ 


when-to-travel 
by 


Green 


Chameleon 


craftedbygc.com 
@CraffedbyGC 


VER THE MANY issues that Design Diary 
QO appeared, featuring the many 

agencies and projects, a big theme of 
loyalty keeps popping up. There’s very mucha 
refreshing sense of devotion and partnership 
between client and agency, or agency and 
client too, which speaks volumes for how the 
web design industry seems to function. 
Instances where projects are ‘pitched out’ blind 
to a pool of fervent takers seem rare, avoiding a 
creative clamouring or stampede for business. 
In fact, if the ‘pick me’ process exists for an 
agency that succeeds in satisfying a client it 
might occur at the very start of a relationship 


“Our aim became fo create an 
evergreen content hub that the client 
could add to and amend over time” 


that tends then to prevail. Often this is because 
a follow-up commission leads directly on from 
work the trusted agency is already attached to, 
which is precisely the case this month. For 
those who haven't spotted them already, Green 
Chameleon are a Bristol-based creative 
production studio that specialise in crafting 


experiences across digital, branding, packaging, 


Home Comforts 


Project duration 
6 months 


People involved 


: eee D) 
Design Director 
7 Paul Thomas | 
| Developer 
: eo «| 
Designer i 
c} ick Mike Babb 
Developer 


Tom Anderson _ 
Creative Director \ wp 


video and animation. Formed in 2012 and 
growing to boast a 12-strong team boasting 
designers, animators, UX specialists, developers 
and videographers, it’s no surprise the talented 
team keep their impressive client list coming 
back. So when the people at Inside Asia Tours, a 
travel and tourism brand already working with 
GC for almost three years, wanted to deliver a 
new digital presence they knew where to go. In 
fact the previous ‘Step Inside Asia’ campaign 
between the two was featured in Web Designer 
252’s Lightbox, so IAT knew that ‘When to 
Travel’ would be in good hands. “This time the 
brief was designing a tool to showcase IAT’s 
expert knowledge of local events, weather and 
generally the best time of year to visit the 
countries that they operate in,’ begins GC’s 
Design Director, Nathan Riley. “Our aim became 
to create an evergreen content hub that the 
client could easily add to and amend over time 
whilst ensuring that the piece was visually 
striking and engaging for potential customers.” > 
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Home Comforts 


When To Travel? 


To help you decide on when the best time of year is to travel in either Japan, Vietnam, 
ee eee ee 


Vietnam 
Cambodia & Laos 


pan Bu 


Show me { WEATHER in JANUARY 


Close communications 

If the first little part of an initial brief was to 
represent the client’s expertise in an effective 
way, another big focus was promotional and not 
purely in typical form. A second objective for 
the campaign would be as a tool that could also 
be used as part of the client’s exhibition and 
trade show stand, making the need for versatile 
access essential. “With this in mind we knew 
we'd spend a lot of time refining the experience 
across mobile and tablet devices ensuring that 
when demos were given to potential customers 
the experience was as smooth as possible.” All 
these requirements and early ideas were 
established immediately when the project 
kicked off with a brainstorming session to 
discuss possible avenues and get IAT’s thoughts 
on their brief. “Following this the GC team went 
away and started putting together look-and-feel 
concepts along with user flows to explore how 
the site might work in more detail, and the 
overall art direction. During the early stages we 
try to bring in the development team as much 
as possible to ensure that what we are 
designing is buildable, however challenging, 
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and makes sense from a technical perspective. 
This also helps to inform the technologies and 
development approach and brings everyone 
involved onto the same page, which helps 
massively in keeping the project running 
smoothly, the scope agreed and defined, 

and deadlines hit.” Having worked previously as 
part of a continuing client-agency relationship, 
both sides would, of course, know that strong 
and close communication would be easy 
enough. IAT are based just around the corner 
from Green Chameleon’s Bristol office, so 
regular catch-up meetings were convenient and 
deemed vital to the producing a successful site 
for giving users easy access to the best events 
and weather at selected destinations. 


Evoking reactions 

“AS always we Started with a kick-off meeting 
where ideas were thrown about between 
designers, strategists and developers,” 
elaborates Creative Director Tom Anderson. 
“The content types to include were clear at this 
stage so the discussions revolved around how 
best to create an interesting but intuitive user 


eeceee Site 


Home Comforts 


Highlight ----- 


Designer Director Nathan Riley sticks his neck out 
and reveals the team’s opinion on a favourite 
feature for showing the project’s true colours. 


“Although a relatively small piece of the puzzle, the draggable timeline at the 
bottom of the month pages was a feature that seemed simple by design but 
the usability issues once prototyped became apparent, screen real estate 
being one of the biggest challenges. The resulting functionality, being able to 
drag and scroll through the months whilst the line animates was a real labour 
of love but we're glad we persevered and completed it for the final build.” 


ETNAM, CAMBODIA & LAOS JAPAN BURMA = = | =  \(BRRESERRRR weather 


“A website provides the opportunity to 
design not just how it looks but how it feels” 


interface for the destination information being 
conveyed. The real challenge was how we 
cohesively tied that info together with 
locational-based weather and then split that 
content up between different countries. As we 
were dealing with events and dates we all 
settled on some form of timeline, which allowed 
users to view events sequentially, but at any 
time they could toggle to the weather for that 
time and destination. This seamless navigation 
between the two core content threads is where 
we focused our efforts and eventually spawned 
the final outcome.” Once the GC team had 
sign-off on the initial art direction both sides 
had agreed, then a second stage of design 
commenced. Here the focus was the rollout of 
the design across all the inner pages pertaining 
to mobile and desktop views, before a final 
Stage tackling the interaction design. “We would 
spend considerable time producing animations 


of page transitions and load effects to help 
guide the development of the site,” Nathan 
recalls. “We're strong believers that a website 
provides the opportunity to design not just 
how it looks but how it feels to a user and 
therefore the emotions and reactions it can 
evoke are revealed more vividly than from 
just a flat design.” 


Visual assurances 

Given that the project would represent a 

travel brand so versed in the value of good 
sightseeing, it’s no surprise that engaging 
visuals would be pushed up front. The graphical 
work poured into honing the frontend would 
therefore utilise the collective talents of the 
whole GC crew, with a preference for keeping 
the deeper development team well informed of 
where things were headed. “As with all our 
projects it’s a real team effort, we generally > 
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use rapid visual prototyping in all our projects 
to start to generate a unique look-and-feel 
concept,’ Tom explains. “While developing a 
clear visual direction we carefully plan out the 
user’s experience in tandem. Using wireframes 
and visual prototyping along with animated 
interaction prototypes we construct the final 
product. Were careful to include developers 
throughout the decision-making process in 
order to keep the designs realistic.” From this 
work the team would have something tangible 
on the visuals to take back to the folks at IAT 
and gauge their reactions. Only after getting 
the OK and the necessary agreements here 
would allow GC’s developers to start writing the 
code for running the show. “The development 
Stage kicks off after all designs and mock-ups 
have been officially signed off,’ says Nathan. “As 
the site relies on a Laravel backend to allow the 
client to upload and manage content, we 
realised the task at hand of uploading over 200 
events and weather details would take 
considerable time so we focused on delivering 
the CMS first whilst the frontend team push 
forward with their tasks with an eye to connect 
the two parts up in the final stages of the build.” 


Arresting development 

This Laraval-based content management 
system was custom-built specifically with the 
purposes of assisting the client. From here IAT 
would have the necessary control most clients 


Together but apart 


The period after development and delivery 
of ‘When to Travel’ revealed a curious 
additional challenge for taking the project 
live. As part of Green Chameleon’s agreed 
service remit and relationship with client 
Inside Asia Tours, the campaign sites are 
actually hosted on GC’s own servers. This 
is because each, including this one, are all 
built with different frameworks and 
technologies that are separate to IAT’s 
main commercial website. “So one of the 
challenges faced here was the setup of a 
reverse proxy, which is essentially a set of 
server rules that allow users and search 
engines to see the campaign site as part of 
the IAT domain and therefore gain all of the 


not so slow that you ever feel you're like 
youre waiting for them to finish to get to the 
content you clicked to see.” 

Moving back towards the frontend coding, 
the majority of the site’s animations were 
created using GSAP, the GreenSock 
Animation Platform. A popular choice for 


“A particular challenge was adding the 
little animated touches fo the Google 
Map powering the weather pages” 


demand when it comes to managing old and 
new content in-house throughout the life of the 
site. “On the backend, there’s a content 
management system that was custom-built in 
Laravel so the client can manage all the site’s 
content,” reiterates Senior 
Developer, Mike Babb. 
“The data from that 
CMS is exposed to a 
React frontend that 
Was So quick we 
actually had to 
slow things down 
a little in order to 
allow the nice 
transitions and 
animations to take 
place! We spent a long 
time reviewing and 
tweaking them so that every 
single one felt just right. Slow 
enough to have time to 
complete and flow nicely, but 


32 design diary 


many of the agencies we cover here, GSAP 
was GC’s firm studio favourite for adding 
necessary creative flourish to ‘When to 
Travel’ and solving a few issues in the 
process. “A particular challenge was adding 
the little animated touches to the Google 
Map powering the weather pages, as we 
couldn't implement them directly with the 
Google Maps API and instead had to work the 
GreenSock magic on a cleverly positioned 
layer over the top of the map. The result is a 
beautiful, customised map bursting with 
animated interactions. Another significant 
challenge was getting the site’s homepage to 
perform well. The background effects for the 
three screens of the country selector were 
originally JavaScript writing to HTML5 
Canvas elements, but some browsers and 
devices really struggled to render the effects 
smoothly enough to meet our standards. In 
the end, we scrapped the JavaScript and 
Canvas approach and implemented them 
using some creative CSS trickery instead to 


SEO value generated, even though it is 
hosted somewhere else,” explains Tom 
Anderson, Creative Director. “This 
approach allowed us to continue offering 
maintenance and updates on the site 
without interfering with their main website. 
Plus, generally we have a very integrated 
relationship with Inside Asia Tours, which 
includes offering aftercare as well as 
continued support on digital marketing 
Campaigns as part of an ongoing 
arrangement. An example of a previous 
Campaign site we also created for them is 
‘Step Inside Asia’, which was a resounding 
success, and there is more to come this 
year that we're all very excited about!” 


reach an almost identical-looking end result 
that performs much better.” 


Final destination 
Looking at the final launch site it’s clear any 
development headaches were overcome 
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VIETNAM, CAMBODIA & LAOS JAPAN 


January in Japan 
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springs. 
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making it the perfect time to hit the slopes, and walking 
around temples and traditional villages is like stepping 
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beautifully to meet the six-month project time. 
Looking back, the main project objectives were 
to create a tool for IAT to improve their search 
engine rankings while providing a rich, and 
most of all useful, brand experience for their 
prospective customers and existing customer 
base. So with that in mind, the 
GC guys did a certain amount 
of work in the lead up to 
delivery to meet the client’s 
expectations and promise the 
site maximum exposure. “This 
tool needed to be scalable and 
have a long-term viability,” 
Tom Anderson reflects. “The 
underlying goal of the project 
was to ultimately drive sales by 
achieving these objectives. We 
worked on the media 
distribution plan with the client 
as well as preparing our own 
distribution and promotional 
plan internally. Due to the 


A blanket of the white stuff hits world-class ski resorts 


What it’s good for: New Year celebrations in Tokyo and 
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creative nature of the project and it being very 
visually unique a lot of the hard work is taken 
care of.” That said, when asked about whether 
that hard creative work has ended in success, 
the answer is understandably subjective. Given 
their considerable experience, GC know it’s 
always just as challenging to measure 
quantifiable statistics for the success of a 
project such as this, especially when talking 
about direct sale conversions. “Sales for IAT on 
average take 12-16 months to convert and rely 
upon multiple touch points all doing their job,” 
concludes Anderson. “However, unique site 
visits are rising week on week and low bounce 
rates and high page visit durations suggest 
that the site is performing very well on the 
consumer side. The fact that this resource is an 
ever-expanding database of information that 
IAT can add to, increasing its value to the travel 
community and ultimately helping IAT establish 
a foothold in the search engine ranking across 
multiple long- and short-tail keywords, is also a 
testament to the success of the project.” fl 
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ompact and bijou amply 
describes Wefail. An agency of 
just three creative minds, Wefail 
have been able to push the 
boundaries of what is possible 
with today’s digital 
technologies. As an agency that 
doesn’t operate conventionally — don't ask 
them for a meeting — Wefail have their own 
unique perspective. 

Co-founder Martin Wefail explains how he 
came to start an award-winning agency: “I’ve 
always loved computers. In the ’8Os | got my 
first Sinclair Spectrum and my mind was blown 
by the realistic graphics and how you could 
make a little man jump through dangerous 
levels with super high detail made out of 
massive blocks of primary coloured pixels. 

“But | think it was later on the Atari ST that | 
began drawing pictures, then | obsessed over 
Photoshop on my first PC for years. Eventually 
| saw someone using Macromedia Flash and 
knew | had to have a go at that. By about 2002 
| met Jordan Stone on a Flash forum and 
Wefail came along in 2003. 

“I'd always been the person that loved art 
class in school. This led to art college and 
many years later — when | was learning Flash 


Breaking the mould 


Wefail 


Interactive online campaigns, 
animated film and app development 


Manchester, Los Angeles and 
a disgruntled Edmonton 


wefail.com 


Shawn Colvin 
Eminem 
Jackass 

Bob Schneider 


American Horror Story 


on my own — | found a free course in 
Manchester that taught you the basics of 
Adobe Macromedia apps. It was that class that 
really pushed me on.” 

As all agency owners know, naming their 
new business can be a torturous experience. 
“Agency name came first,” Jordan explains. 
“Martin definitely shepherded us along to 
‘wefail’ after we brainstormed and piggybacked 
back and forth.” Martin also comments: “By the 
time | met Jordan he already had his personal 
site SoFake. It was a negative name at a time 
when agencies were super positive about 
themselves, | loved the self-depreciation and 
Wefail came from that, though some people still 
don’t read ‘we fail’ in the name and pronounce 
it ‘wuhfal’. People are strange.” 

The website Wefail has created is striking. 
Martin outlines their approach to its design and 
how it has evolved: “I think it’s important to 
make a new site now and again to keep it fresh. 
But for an agency like ours, it’s also important 
to keep up with tech. If we still had our original 
Flash site up for Wefail.com the majority of 
users couldn't see it on their phones. There 
are other agencies that have always worked 
in the traditional way of a scrolling HTML 
page and that no doubt has a longer shelf 
life, but where’s the fun in scrolling down a 
page of text?” 

Each agency approaches its marketing 
differently depending on the type of clients 
they are looking to work with. For Wefail, the 
level of commitment their clients demonstrate 
is often a deciding factor as Martin explains. 

“When we first came out we'd have clients 
lined up each year. But once ad agencies got 
spooked by ‘the death of Flash’ they fled for the 
hills and we suddenly found ourselves asking 
where everybody had gone. It’s still very much 
word of mouth for us. 

“We'll release new work and the next client 
might see it and get in touch. We've actively 
chased potential clients many times before, 


profile 37 


Breaking the mould 


and | always find that if you have to 
aggressively chase them down, chances are 
they're going to back out somewhere down the 
line and leave you with a half-built job. Always 
best if they come to us. At least you then know 
they’re committed.” 

How an agency chooses which clients to 
work with and which campaigns to work on has 
a number of factors. Often, how interesting the 
work on Offer is will be the overriding decision, 


or if a client can add to the agency in some way. 


For Wefail, they have been lucky enough that 
the clients they have attracted are diverse and 
have offered engaging projects to work on. 

“| don’t think we've ever had the chance to 
pick and choose,” says Martin. “We've been 
lucky, though, in that every job we’ve been 
offered has been something fun for a good 
client, from American Horror Story to Jackass, 
The Simpsons, Eminem, Amazon Prime, EMI 
musicians, they've all been clients that fit 
our style of work.” 

“Our latest work for Amazon Prime came 
through our very first client, Bob Schneider. 
We'd made an animated music video last year 
for him and a year later the musician Shawn 
Colvin saw the video and asked Amazon to get 
in touch to ask if we'd build her an animated 
film for her new album of lullabies. It’s always 
great to have our work bring in new clients 
because they already understand our style, 
as were not exactly mainstream. 

“Yes, there’s work we turn down, because of 
the nature of the things we make we've had 
some really out-there pitches from people. One 
| remember wanted us to build a live virtual 
auditorium where users would walk in and take 
a seat in a 2,000-seat stadium and could look 
around at each other, then a corn-based snack 
would walk out on to the stage and do a show 
before asking selected members of the virtual 
theatre to come on up and pick a prize in real 
time. This was 12 years ago, too. It’s not like 
there was any way at all to make such a thing, 
there still isn’t. We said no.” 

As an unconventional studio that pursues 
unusual design challenges, is there a project 
that embodies the Wefail philosophy? Martin 
continues: “I think our latest job for Amazon 
Prime defines how we work. It’s a 20-minute 
animated music video for Shawn Colvin. A 
20-minute piece of animation is an incredibly 
long time for two people to make, and we only 
had four months to complete it. 

“Coming from animated web design we had 
to use all the tricks we'd learnt from working 
on the Web so the whole movie is coded in 
AnimateCC. Cameras, environment, puppet 
animation, everything was put together the 
same way wed approach building an animated 
Flash website. The primary difference being the 
output to video and not having to worry about 
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“| can't remember the last 
site | saw that | told anyone 
about and | think that’s 
down to both the tools and 
the designers. We seem to 
have fallen into a one-page 
scroller habit and if that’s all 
that’s being made then why 
ask for more. I’ve seen no 
innovation in web design 
in along time. It’s 
unfortunately become 
the most boring design 
medium of all” 


interaction. We really had to adapt for that job 
and all from two separate locations on opposite 
sides of the world. The workflow was perfect, 
though, and we're really happy with how it 
came out.” 

With Jordan also commenting: “I like to think 
we work in a box, together, trying to satisfy 
each other. If we can manage to do so 
simultaneously then that’s great for us. Now 
if other people like it too, that’s also great.” 

As no two projects are the same, the 
timeframe to complete the work can, of course, 
vary. “It’s four to five months,” Martin reveals. 
“Now, some of that time will inevitably be 
downtime. If the client pauses and needs to 
approve a direction, then we have to wait on 
that approval. It’s the pauses that soon add 
up and you'll find a two-month contract 
creeps into three. 

“I'd say always add 30 per cent more time on 
to your estimate for things that are out of your 
control. Who is assigned to a project depends 
on the format. On the Shawn Colvin music 
video for instance, it was just Jordan and 
myself working away on it around the clock. 
However, if it’s an HTML5 web job then it’s more 
Sebastian (DeRossi) and me that will take the 
wheel. The way we use JavaScript is pretty 
complex in our own little way, building a 
Flash-style site with all that movement 
and interaction is really not an easy task. 
Sebastian’s a genius with CreateJS and 
makes the impossible work.” 

With a background in Flash developments, 
Wefail have gravitated towards the latest 
animation design tools. Jordan outlines their 
current toolset: “Adobe Flash and Adobe 
Photoshop used to carry us (and | used Cool 
Edit Pro for sound stuff) but nowadays we rely 
on AnimateCC and CreateJS for websites.” 
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Wefail 


wefail.com 


The new, award-winning, HTML5 
JavaScript-powered Wefail site, built 
for your telephone, tablet, laptop and 
desktop. The art direction was created 
in Photoshop, then animations and 
environment put together in 
AnimateCC. Text-to-speech voices and 
background music were made in an 
audio editor before being crunched 
down to a loadable size. 

Once this was complete, the overall 
CreateJS output was taken apart and 
supercharged in a text editor. Finally, 
a large chunk of time went into the 
site being tested and debugged on 
as many devices as possible, with 
responsive scale being handled 
by breakpoint. 

We'd wanted to build an 
entertaining little site that used 
animation and audio to create an 
environment that worked on phones 
through to desktops. Something that 
brought all the visuals of our Flash 
work up-to-date through JavaScript 
and hopefully opened doors to new 
clients that want something different 
to what they're currently being 
offered in web design. There’s a 
reason sites like this don’t come along 
often, they’re really hard to make. It 
took three months to put together 
between two of us, but it was worth it 
to see how far we could push the idea 
and create something original. 
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Shawn Colvin 
The Starlighter 


When we first started this project I really 
couldn't see the end. A 20-minute music 
video built with illustrations we had to 
put together in-house before animating in 
AnimateCC and setting up camera rigs, 3D 
rotation and depth of field all in 5K. 

To make it harder on us we also decided 
to base the whole thing ona stage ina 
theatre, so the animated lullaby stories 
would be based within a parent environment 
of a theatre full of people. 

On top of that wed also rotate the stage, 
so the camera floated around to the 
backstage view, which meant designing both 
a front and a back view for hundreds of 
moving pieces. 

We never make things easy for ourselves 
and halfway through | felt like we'd never 
complete it, but if you keep moving forward 
each day you eventually see the finish line. 
The video is a promotion piece for the new 
album of lullabies by Shawn Colvin and it 
now resides on Amazon Prime US. 


Left Stunning art 
direction coupled 

with fluid animation 
illustrates the diversity 
that Wefail bring to the 
design community 


Below Current 
animation techniques 
and tools bring to life 
a bygone era of 
miniature theatre 
reimagined for the 
iPhone generation 
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Martin also explains: “Yes, the same. But ma 
big fan of Procreate and Adobe Draw on iPad, 
so | sketch and make illustrations (all of the 
Shawn Colvin imagery was hand-drawn with 
Procreate) on the iPad then | take that over to 
Photoshop to slice. 

“The usual workflow for me would be to draw 
a character on the iPad. Import that to 
Photoshop on the desktop. Cut each limb and 
place them in their own layer. And finally import 
those pieces to AnimateCC before setting them 
up with individual pivot points on their own 
layers to create the complete character. They 


are then ready to animate and pass over to 
Jordan for import to the environment. Quite a 
lot of work but once you have that puppet set 
up you can reuse it throughout the overall 
animation.” 

With such a long history and experience how 
does Wefail see the evolution of the digital 
space and the tools including HTML5, CSS3 and 
JavaScript developing? 

“I'd say they've already been shaping web 
design for the past six years, to be honest 
they're the only tools used by the majority and 
| don't think they’re actually being pushed when 
it comes to fun interaction and leftfield ideas,” 
says Martin. 

He continues: “I can’t remember the last site 
| saw that | told anyone about, and | think that’s 
down to both the tools and the designers. We 
seem to have fallen into a one-page scroller 
habit and if that’s all that’s being made then 
why ask for more. I’ve seen no innovation in 
web design in a long time. It’s unfortunately 
become the most boring design medium of all. 

“One problem is that to access design now 
you absolutely need to know how to code at 
root level. In our day we had Flash and a huge 
amount of help with code snippets and the way 
the app itself held your hand and introduced 
you to the basics. One person could sit in their 
bedroom and build the most amazing 
foundation for a site within a day. I’d like to see 
AnimateCC picked up more with the output 
being CreateJS for Canvas. It’s so much like the 
old days of designing in Flash that it’s actually 
fun to work with.” 

Sebastian agrees: “Having the ability to use 
familiar tools such as AnimateCC is a massive 
advantage. With AnimateCC exporting 
JavaScript, old ActionScript 3.0 users like Martin 
can do everything... well, almost everything he 
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Wefail is founded. Our first Flash site 
(http://archive.wefail.com/wefail/) 
launches Our careers. 

Employees: 2 


Bob was our first client and we still 
work with him today, a lovely man. 
Employees: 2 


The handsome photographer 
Matthew and our infamous zoom 
engine. 

Employees: 2 


Two people and a three-week 
deadline, a tough job, but one we 
wanted to pull off. 

Employees: 2 


Our hipster platform game that 
gained six-million users on launch. 
Employees: 3 


A puzzle site linked to American 
Horror Story. Users had to unlock 
each section room-by-room. 
Employees: 3 


Monster’s Socks was our first app. It 
won best children’s fiction at the 
BolognaRagazzi Digital awards. 
Employees: 3 


The Ratboy HTML5 interactive site 
built for mobile and desktop. 
Employees: 3 


Our HTML5 game. Swipe to slap and 
feel alive! 
Employees: 3 


The HTML5 rebirth of our studio 
site. 
Employees: 3 
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did before. AnimateCC’s IDE is so flexible that 
the old Flash masters at Wefail have no real 
reason not to use CreateJS to build mind 
blowing experiences like they did in Flash’s 
‘golden’ days. | am just happy to help them out! 

“As with most Wefail projects, not only do we 
try to use the latest and greatest versions of the 
CreateJS Libraries, but we also use advanced 
features that most developers are unaware of. 
When we started wefail.com we decided that 
we wanted it to be fast, fast on both desktop 
and mobile devices, so a lot of care was taken 
when putting it all together. StageGL focuses 
on content that WebGL excels at rendering, 
which was perfect for the experience we 
wanted for wefail.com. Of course there are 
other secret optimisations that we did but 
Martin has forbidden me to share them here... 
| have said too much already.” 

Mobile is a key component of the web 
experience. What is Wefail’s approach to 
designing and developing for different devices? 

“We now design a site for mobile and then 
adapt it for desktop,” Martin explains. “Our 
workflow will be getting the framework 
together and functioning as it should do on 
phones, then working through breakpoints up 
to the largest desktop screens. For wefail.com 
there was a lot to consider, things like the 
rasterised falling text-cards had to be 
intelligible on an iPhone 5’s screen but also had 
to hold together on a 5K monitor. If we make a 
site | want to know | can use it the same way on 
all devices and desktop. | hate when you visit a 


“Be passionate with your work! 
Even if it’s not the most exciting 
work, find something about it 
that will challenge you. Nobody 
likes a grey cloud. Martin likes to 
come up with the craziest ideas 
and my initial response is ‘no 
way and after a few hours | 
challenge myself to figure 
out a way to get it done” 
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Our first client site using JavaScript 
to create something that’s more 
relatable to the old days of Flash. 
The site was based on a little piece of 
ActionScript that made a character 
move left and right through a 
parallax environment. 

The first hurdle was to rework that 
code in JavaScript and with CreateJS, 
and get it working on Canvas so we 
could have it run on mobile. The tech 
side of this job went great. Sebastian 
fortunately proved how magnificent 
he was at interpreting ActionScript 
concepts into HTML5-based script. 

It was interesting to see the 
response on social media from 
teenagers that haven’t grown up 
with experiential sites and most 
of them decided it was some sort 
of witchcraft. 

However, it was all down to some 
very hard work to make it all look 
very simple. Things like dynamic 
Tour Dates being displayed with 
Canvas were not so easy and we had 
to figure out ways to pull live data in 
without breaking out of the animated 
stage. Lots of work to make 
something look simple. 


RAT BOY 


"OHO doe 


RAT BOY 


a L,Y 
er 44° G6 GS) “as lu 


\ 


m——— = ~ —— =< =< 


\. 


VLG TA ads 


Top Wefail show their 
ample technical skills 
with this site that seems 
lightweight, yet packs a 
mighty technical punch 
no matter which screen 
it is viewed on 


Middle Fast and 
intuitive was the 
guiding design 
principle behind this 
site. Click or tap a 
button to see more 
seamless animations 


Bottom /he immersive 
scrapbook feel of the 
graphics perfectly 
aligns with the artist 
and their music 


site on mobile and they've put a video of it on 
there because they didn’t get it working on 
smaller screens.” 

The partnership that is the foundation of 
Wefail is unusual. Looking back what advice 
would they give to anyone starting out? “Wefail 
has always been just Jordan and myself until | 
stumbled on CreateJS and began talking with 
Sebi and unfortunately for him he was too 
valuable to us, so he helps out a ton with the 
wizardry of CreateJS,” says Martin. 

“My god, advice for people getting into 
interactive web design? Become a vlogger 
instead, it’s way easier and the money seems 
to be outrageous. Seriously though it’s sucha 
difficult job to make animated fun sites now 
that run on mobile, I'd say look to partner up 
with someone that covers your weaknesses. So, 
if you're a great animator, team up with a great 
coder, make something fun and post it up. God 
knows we need someone to shake things up 
or were all going to be looking at one million 
variations of a one-page scroller with a sad little 
CSS animation for decades to come.” 

Sebastian also comments: “Be passionate 
with your work! Even if it’s not the most exciting 
work, find something about it that will 
challenge you. Nobody likes a grey cloud. 
Martin likes to come up with the craziest ideas 
and my initial response is ‘no way’ and after a 
few hours | challenge myself to figure out a way 
to get it done. It’s really rewarding to push 
yourself and usually your client, employer or 
co-workers will always respond positively.” 

And what of the future? Martin concludes: 
“We've just finished the Shawn Colvin music 
video and that was four months tied to the 
computer day and night, so at the moment 
we're dusting ourselves off and recharging. 


Breaking the mould 


Ideally I'd love for us to get a music video to 
animate or a cool little JavaScript site that’s fun 
and aimed at leaving an impression on the user. 

“There’s not many studios left that make 
off-the-wall sites, as mobile pushed everyone 
into an HTML template that was guaranteed to 
work on all resolutions and give you a painless 
workflow. That in turn became what clients 
expect, to get a simple HTML page that 
followed the design of every other site being 
made at the moment. 

“Technically it works, but as far as a 
memorable experience goes it’s empty. | think 
we've lost the art of making people laugh or 
getting some kind of emotion out of them with 
a website. Everything’s become so serious and 
follows the same structure, but being serious 
doesn't always make an impression. We need 
to step away from the one-page scroller.” 

Wefail strive to develop digital experiences 
that are unforgettable. In an environment that 
seems to have lost its excitement and ability 
to experiment, Wefail fly the flag for rich, edgy 
immersive spaces that hail the early days of the 
Web, when anything was possible. If there are 
champions for a return to experimental design, 
then it’s Wefail. 


Jordan Stone and Martin Hughes 


2003 


Manchester, Los Angeles and 
a disgruntled Edmonton 


HTML5 Design 
App Design 
Motion Design 
TV and Movie Animation 
Joy Makers and Heart Breakers 
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INVISION 


invisionapp.com 
InVision offers a way to string 
together individual static 
designs in order to create user 
flows. The tools are simple and 
easy to use, and allow syncing 
directly from Photoshop and 
Sketch before linking designs 


together. With powerful 
collaboration and comment 
features it’s clear to see why 
SO many designers use it. 
FREE WITH PAID PLANS 


wee 


DESIGN BETTER. FASTER. TOGETHER. 


MUST TRY 


MARVEL 


marvelapp.com 
Marvel, much like Figma, provides 


an all-in-one experience for design, 


prototyping and collaboration. The 
design UI is simple and beautiful, 
while offering all the tools you 
need. Marvel’s prototyping tools 
enable both high and low fidelity 
prototypes to be created easily. 
FREE WITH PAID PLANS 


AXURE 


axure.com 
Axure is a wireframing and 
prototyping tool primarily aimed 
at software development. Axure 
isn't trying to offer everything. 
Instead, it offers really powerful 
tools for rapid prototyping, 
diagramming and documentation 
and it does them well. 
PAID WITH FREE TRIAL 


Turn Ideas Into 
Products Faster 


Design, prototype, and gather 
feedback all in one place with Figma. 


Try Figma for Free 


Available online; on Windows, Mac or Linux 


GULP 


https://gulpjs.com 
Gulp is a frontend build tool used 
to perform any number of 
functions from compiling SASS to 
building SVG sprites. Gulp will save 
you time and perform a lot of the 
repetitive tasks required, enabling 
you to concentrate on writing code 
and building applications. 
FREE 


GRUNT 

gruntjs.com 
Another frontend build tool that’s 
used in the same way as Gulp with 
the aim of saving you time and 
effort when building the frontend 
of any website or app. These tools 
have become an important part of 
frontend development due to their 
ability to perform repetitive tasks. 
FREE 
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Metro Station 


Backbay 


Vacuum Cleaner 


Studio 


YARN 


yarnpkg.com 
Yarn is a package manager. It 
works much the same as Node 
Package Manager (npm). Yarn 
caches every package making it 
incredibly fast to download and 
install dependencies, and with all 
of the same packages as npm so 
you can easily make the switch. 
FREE 


WEBPACK 

webpack.js.org 
Webpack is a JavaScript module 
bundler that enables you to keep 
your JavaScript files small and 
focused. In its simplest form 
Webpack will then bundle them 
all into one minified JS file which 
can be included in your website 
or application. 
FREE 
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DESIGN FASTER GODE QUICKER 


MUST TRY | 


| VUE.JS 


vuejs.org 
Vue is a progressive JavaScript 


framework. It can be easily 
integrated into an already existing 
app and used in one small part if 
needed. Equally, it can be used to 
build full single page apps. The 
framework is approachable and 
the basics can be easily grasped. 
FREE 


| KNOCKOUTIS 


knockoutjs.com 
KnockoutJS is a small and 


lightweight JavaScript framework 
— weighing in at just 59kB. It 
enables developers to create 
simple data binding for 
interactions with automatic Ul 
refreshing. The KnockoutJS 
website also includes a really nice 
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interactive tutorial, which can help 
you get started. 
FREE 


| FOUNDATION 


foundation.zurb.com 
Foundation is a responsive 
frontend framework created by 
Zurb. The framework is broken 
down into two different 
frameworks; Foundation for Sites 
— which rivals Bootstrap — and 
Foundation for Emails, which 
offers developers a much nicer 
way to develop email templates. 
FREE 


| PREACT 


preactjs.com 
Preact is another JavaScript 
framework, which touts itself as 
the “Fast 3kB alternative to React 


feature 
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with the same modern API.” Its 
Small size makes it quick to 
download, parse and execute your 
application. Geared towards 
performance and with a handy 
“Switching to Preact (from React)” 
tutorial on the Preact website. 
FREE 


| SVELTE 


svelte.technology 
Svelte is a component-based 


JavaScript framework, much like 
React, Angular and Vue but with a 
difference. Svelte compiles your 
code into vanilla JavaScript at 
build time — not at runtime like 
the others — which means no 
framework abstractions or lengthy 
load times, generating fast and 
performant apps. 

FREE 


“There's always a number of 
tools, methodologies and 


-Systems | like to use for most 


projects, the BetterBoilerplate 
utilises ITGSS, BEM and OOCSS 
giving mea great head start 
for any project.” 


\ Steven Roberts 


Creative Developer - Asemblr.com 


| REAGT 


reactjs.org 
React is a JavaScript framework 


for building interactive user 
interfaces. The framework is 
developed and used by 
Facebook in all of its apps and 
websites. React aims to provide 
speed, simplicity and scalability 


for any project by providing a 
component based library. 
FREE 
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GOOGLE FONTS 


fonts.google.com 
Google Fonts offers a large selection of free web fonts which can 


be used on any project. The interface is clean and minimal but 
enables you to easily see and test new fonts. It also offers a 
number of different ways to include the fonts in your project. 
FREE 


MUST TRY 
2 COOLORS 
coolors.co 


Coolors is a great little web app for 
when you need inspiration; fire up the 
app and hit the Spacebar to generate 
a random colour pallet. Once you find 
a colour you like you can ‘lock’ that 
colour and hit the Spacebar again to 
generate more colours. 

FREE 


2 KUTEJS 


bit.ly/2rcoZnf 
KUTE.js is a JavaScript animation 


framework, built with fast code 
execution and memory efficiency 
in mind. With everything from two 
and three dimensional transforms 
to SVG manipulation KUTE.js is a 
strong contender for creating 
simple and lightweight animations. 
FREE 


2 ANIME.JS 

animejs.com 
Anime.js is a JavaScript animation 
library packed full of features. The 
library is performant and produces 
beautiful, seamless animations. 


SPIRIT 


WEB ANIMATION 


There’s detailed documentation 
on the website and a variety of 
demos produced by the developer 
Julian Garnier on his Code Pen. 
FREE 


2 BLOTTER 


blotter.js.or 
Blotter is a JavaScript API for 


drawing unconventional text 
effects. Powered by three.js and 
underscore.js it is capable of 
producing some weird and 
wonderful animated text effects. 
The library offers five different 
material effects all of which can 
be customised. 

FREE 


animate objects 


on the 


Developers. 


ghost 
outline 
eyes 


shadow 


BIG HITTER 


2 GSAP 


bit.ly/20ECgVp 


For Designers & 


GSAP is a powerhouse when it comes to web 
animation. Starting life as a Flash animation plugin, it 


has since evolved to be one of the best web animation 


libraries available, enabling complex animations and 
time-based functions to be easily authored. 
FREE WITH PAID ADD-ONS 
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2 ANIMATE.CSS 


bit.ly/2lIOWvaN 
Animate.css is a small library of 
CSS animations, which can be 
used to add subtle (or not so 
subtle in some cases) animations 
to elements in your page. All you 
need to do is include the Animate. 
css code and then use the classes 
provided to animate elements in 
your application. 


FREE 
2 THREE.JS 
threejs.org 


three.js is a 3D animation library 
built for the web. three.js works by 
creating a three-dimensional 


Ease 


CSS Properties 


Total control 


pause() 


Freakishly robust 


scene in which objects are 
rendered, a camera is then placed 
inside this scene. Some of the best 
animated websites on the web 
utilise three.js! 

a 


MUST TRY 


2 SPIRIT 

spiritapp.io 
Spirit is a web animation timeline 
GUI currently in beta. The 
interface is intuitive and simple 


to use enabling you to make 
changes or additions and see the 
results in the browser in real 
time. Spirit could be a real game 
changer for web animation! 
FREE 


Compatible 


DESIGN FASTER GODE QUICKER 


METHODOLOGIES & TESTING 


3 SMACSS 

smacss.com 
SMACSS is a scalable and modular 
architecture for CSS. There is 
nothing to download or install 
here, just a whole host of ideas for 
structuring projects both large and 
small. The website includes a free 
eBook for you to download, read 
and study. 
FREE 


4 PINGDOM 


tools.pingdom.com 
Pingdom offers free performance 


testing. The speed test will give you 
an overall grade as wellasa 


<= pingdom 


URL 


breakdown of everything your users 


download when visiting your 


website and handy tips for fixing any 


State Colors 


performance issues. Pingdom also 


offer uptime and performance 


monitoring in their paid accounts. 


FREE TEST — PAID ACCOUNTS 


3 GOOGLE PAGE SPEED TEST 
bit.ly/180Qqhi 
Google Page Speed Test is an 
Online tool used to analyse a 
website and give a score based on 
performance. You start by entering 
the URL of your website and 
running the test, Google will then 
Suggest ways in which the site’s 
performance can be improved. 
FREE 


3 O0CSS 

github.com/ 
stubbornella/oocss/wiki 
OOCSS stands for Object 


RECOMMENDED 


server 


z 


[oo CO tannt Tunac 


Sign up for free to test 
your site every minute 


The following colors are used in the bars in the waterfall 
chart to indicate the different stages of a request. 
1 DNS Web browser is looking up DNS information 


Connect Web browser is connecting to the server 


Wait Web browser is waiting for data from the 


FULL PAGE TEST DNS HEALTH LOG IN SIGN UP 


Pingdom Website Speed Test 


Enter a URL to test the load time of that page, analyze it and find bottlenecks. 


Test from 


New York City, New York, USA START TEST 


SIGN UP FOR FREE 


About Pingdom 


Pingdom offers cost-effective and reliable uptime and performance 
monitoring for your websites. We use more than 70 global polling 
locations to test and verify our customers’ sites 24/7, all year long. With 
Pingdom you can monitor your website’s uptime, performance, and 
interactions for a better end-user-experience. Your customers will thank 


® SSL Web browser is performing a SSL handshake you. 


Nobody Likes a Slow Website — We built this Website Speed Test to 


Send Web browser is sending data to the server help you analyze the load speed of your websites and learn how to 


make them faster. It lets you identify what about a web page is fast, 
slow, too big, what best practices you’re not following, and so on. We 
have tried to make it useful both to experts and novices alike. 


Receive Web browser is receiving data from the server 


In short, we wanted it to be a easy-to-use tool to help webmasters and 
web developers everywhere optimize the performance of their 
websites. 


Orientated Cascading Style Sheets 
and was born out of the backend 
development methodology. The 
core principle is around the reuse 
of code and Dontt Repeat Yourself 
(DRY) programming, the results of 
which are easier to maintain, with 
smaller CSS in your project. 

FREE 


“After deployment you must fine 
tune your site. Tools such as 
Pingdom and Google Lighthouse 
Can measure the impact of not 
performing optimisations, such 
as file minification, 
compression, and image 
compression.” 


Jon Constantine 
CTO - Asemblr.com 


3 ITCSS 
www.creativeblog.com/ 


web-design/manage-large-css- 3 B E M 
projects-itcss-101517528 getbem.com 
ITCSS or Inverted Triangle CSS is a BEM is a CSS methodology, 


methodology for CSS organisation. which is widely used 

ITCSS advocates splitting your CSS throughout the industry. The 
into multiple layers: settings, tools, simplicity of its naming 

generic, elements, objects, convention helps to tackle 
components and trumps. These specificity problems in CSS — 
layers of styles get more specific enabling elements to be scoped 
per each layer avoiding a lot of to a block name using a double 
problems with specificity. underscore and modified using 


FREE a double dash. 


FREE 
3 ATOMIC DESIGN — 


atomicdesign.bradfrost.com 
Atomic Design is a methodology 


for creating design systems. It 
breaks design into five different 
levels: Atoms, Molecules, 
Organisms, Templates and Pages. 


Each level can and should include 
elements from the previous layers 
to build up designs. 

FREE — BOOKS AVAILABLE 
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277 SUBLIME I TEXT 


sublimetext.com 
Sublime Text has beena 
popular text editor among 
developers for years now. It’s 
packed full of useful features 
from multiple cursors to 
powerful find and replace tools, 
and also includes syntax 
highlighting. Sublime Text also 
has a rich ecosystem of plugins 
for almost anything! 
PAID WITH FREE TRIAL 


MUST TRY 


3 ATOM 

atom.io 
Atom is billed as “A hackable text 
editor for the 21st Century” and is 
built by the team at GitHub. There 
are a vast array of themes and 
packages to extend Atom, so it’s 
definitely worth checking it out if 
you haven't done so already. 
FREE 


4 VISUAL STUDIO CODE 


bit.ly/1KvI3PL 
Visual Studio Code is a free text 
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editor from Microsoft. It has all 
of the features you'd expect and 
some nice little extras, such as 
its built-in-git and command line 
features. Visual Studio Code is 
available for Windows, Mac and 
Linux, so is worth trying out. 
FREE 


4 BRACKETS 


brackets.io 
Brackets is a free text editor from 
Adobe, which has been built using 
JavaScript. The editor is packed 


feature 
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20 KILLER TECHNIQUES! 


RECREATE THE WEB'S BEST EXAMPLES TODAY 


with useful features for 
developers. The inline editor 
feature can locate styles from 
clicking an element in a HTML file 
to make quick changes. 


FREE 
| JSFIDDLE 
isfiddle.net 


JSFiddle started life as an online 
editor for MooTools and was called 
MooShell, before being renamed 
with support for all JavaScript 
frameworks in 2010. The platform 


setTimeout(function(){ 
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}, 50); 


offers a fantastic playground for 
testing JavaScript. 
FREE 


| NOTEPAD++ 

bit.ly/1giSNHN 
Notepad++ is only supported on 
Windows, but it can be used as a 
replacement for the built-in 
notepad. Supporting several key 
programming languages, it is 
minimal but functional. Its clean UI 
ensures your code is the focus. 
FREE 


MUST TRY 
A SVGOMG 
bit.ly/2re4sj2 


SVGOMG is an online tool for 


optimising SVG. Under the hood 
SVGOMG uses the incredibly 


powerful command-line tool 
SVGO to perform optimisations, 
but SVGOMG does so while 


visually showing you any 


changes the optimisation has 


made to an image. 


FREE 
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Display Table Informatior matic 

Display Title Attributes infor 

Jisplay Topographic Information Hea 
The Web Developer extension adds various web developer tools to a browser. The extension is available for Cnrome, Firefox 
and Opera, and will run on any platform that these browsers support including Windows, macOS and Linux. 


‘9 Download for Chrome 


Version 0.5 


© Download for Firefox 
Version 2.0.1 


Enter a search query ®@, Search 


Donate 


All the work on chrispederick.com is distributed for free, 
but your donation allows me to continue my 
development and any amount is greatly appreciated. 
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Show original 


Compare gzipped 
@ Prettify code 


® Multipass 


Precision 


© 
@ Remove XML instructions 
@ Remove comments 
@ Remove <metadata> 
o Remove xmins 
0 


Remove editor data 


Cleanup attribute whitespace 


29.38k — 9.24k 31.46% © 


WEB DEVELOPER TOOLBAR 


bit.ly/2rdrCGc 
The Web Developer toolbar has been around for 


almost as long as web design has, but it’s still really 
useful for web development today, offering a 
number of really handy tools, from deleting cookies 
to displaying an image's alt text. 

FREE 


Create ripple effects 
and transitior Ss 


Inspired by themustafacelik.com 


Contextual information _ Ripple effect 2 Direct to the work 

The background is a project that My _ Every time the user moves their mouse, <— If you would rather havea 
Mustafa has worked on, as well as the Be the image in the background ripples and — ____ simpler interface then the work 
title, there is contextual information on aa distorts in real time, instantly drawing is on display in a simple list style 
the role he undertook for that project. si _ attention to the movement. from this menu. 


@ MustafaCelik All Works + 
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/01 [work } 


Change the slide 

The up and down arrows at the bottom of 
the interface allow the image slide to 
change and the ripple effect is used again 
to create a transition between the images. 


On screen navigation 

To the left and right of the interface 
are quick links to ‘about’ and 
‘contact’ which are commonly 
sought-after information. 


workshop 


e you can put 
everything you need on the 
interface in front of the user. 
Mustafa includes everything 
needed to navigate on the 
screen, but with an off-screen 
menu as an alternative 


browsing solution. 


Create ripple effects and transitions 


DOWNLOAD TUTORIAL FILES wwwfilesilo.co.uk/webdesigner 


Be unique 


There are so many interesting effects that can be added to pages to make 
elements stand out, it’s important to pick the right effects that work together 


<comment> | tO make your site unique rather than just a copy of other sites. That is what 


What our 


experts think | Mustafa has done here with the displacement ripples. 
of the site | Mark Shufflebottom, Professor of interaction design 


Creating ripples 
In order to create ripple effects like Mustafa Celik, PixiJS 
will be used since this provides simple displacement 
effects. Here the JavaScript code sets up the variables 
needed and loads the images to create the effect. Once 
the images are loaded the ‘setup’ function is called. 
var app = new PIXI.Application(window. 
innerWidth, window. innerHeight) ; 
document . body. appendChild(app. view) ; 
app.stage.interactive = true; 
var posX, displacementSprite, 
displacementFilter, bg, vx; 
var container = new PIXI.Container(); 
app.stage.addChild(container) ; 
PIXI. loader. add(“img/ripple. png”) .add(“img/ 
bg. jpg”) . load(setup) ; 


Creating the displacement 
In the ‘setup’ function the displacement sprite is created 
that will create the ripple effect and this is added to a 
displacement filter. It’s then set to move its anchor point 


to the centre of the image and positioned on the screen. 


function setup() { 

posX = app.renderer.width / 2; 
displacementSprite = new PIXI.Sprite(PIXI. 
loader.resourcesl“img/ripple. png” ]. texture) ; 
displacementFilter = new PIXI.filters.Displa 
cementFilter(displacementSprite) ; 
displacementSprite.anchor.set(@.5); 
displacementSprite.x = app.renderer.width 

i 2 

displacementSprite.y = app.renderer.height 
ae 

vx = displacementSprite.x; 


Finish the setup 
To finish off the ‘setup’ function, the displacement filter 
scale is set and the background positioned. Notice the 
scale is ‘O’ for the displacement, that’s because it will be 
set to a height as soon as the mouse moves. 
app.stage.addChild(displacementSprite) ; 
container.filters = [displacementFilter]; 
displacementFilter.scale.x = Q; 
displacementFilter.scale.y = Q; 
bg = new PIXI.Sprite(PIXI. loader. 
resources[“img/bg. jpg” ].texture) ; 
bg.width = app.renderer.width; 
bg. height = app.renderer.height; 
container. addChild(bg) ; 
app.stage.on(‘mousemove’, onPointerMove). 


on(‘touchmove’, onPointerMove) ; 
loop(); 
Z 


Get the mouse 

The next code just grabs the position of the mouse on 
the x-axis whenever the mouse moves. This will be used 
to trigger the amount of ripple displacement effect when 
the user moves their mouse. More movement will make 
the ripple bigger. 

function onPointerMove(eventData) { 

posX = eventData.data.global.x; 

} 


Making it move 
The ‘loop’ function continually updates the screen. A 
velocity for the x-axis is worked out using the position of 
the mouse and the ripple. This is then mapped onto the 
filter to give a value between O and 120. 

function loop() { 

requestAnimationFrame (loop) ; 

vx += (posX - displacementSprite.x) * @.045; 

displacementSprite.x = vx; 

var disp = Math.floor(posx - 

displacementSprite. x); 

if (disp < @) disp = -disp; 

var fs = map(disp, @, 500, 0, 120); 

disp = map(disp, @, 500, 0.1, 0.6); 


Finishing the code 
At the end of the ‘loop’ function the sprite is scaled to the 
amount of displacement and filter scaled to the amount 
of depth it should have. Finally, the map function is 
declared that maps value ranges to new values. 
displacementSprite.scale.x = disp; 


displacementFilter.scale.x = fs; 

} 

map = function(n, start1, stopl, start2, 
stop2) { 

var newval = (n - startl) / (stopl - start1) 
* (stop2 - start2) + start2; 

return newval; 
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Tutorials 


Add interactive 
directional images 


Use the Direction-Reveal library to respond to user movement and 
animate images in different directions with a selection of styles 
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f you have your own portfolio site, you have 
probably spent more than your fair share of 
time trying to bring images of your work to 
life, making them interactive in some way that 
gets the attention of the user so that they want to 
explore the content further. 

Direction-Reveal is a small CSS and JavaScript library 
that will really help out any kind of portfolio that requires 
image and description formatting. In this day and age 
nearly every site has some sort of interaction on a page 
before you actually click through to the content. The way 
Direction-Reveal brings a novel approach to this problem 
is by grabbing the direction that the user’s mouse moves 
over the image. It uses this to trigger an animation, from 
the side that the user entered the image, so that the 
reveal of the content comes over the top. Again, as the 
user leaves that image, the content will animate away 
again, but this time using the direction that the user left 
the image. What you end up with is animations that dont 
follow the usual ‘appear and disappear rules. At first the 
user probably wont notice, but it soon becomes 
apparent as the user moves in and out of a list of images. 
This effect makes for a great way to grab the user's 
attention without being too over the top! 


1. Starting off 


Open the ‘start’ project folder in your code editor. Here 
you will see the index.html file and associated folders, css, 
images and js. Now open ‘index.html. You will see that 
some basic content has already been created. Before the 
closing body tag add the code here for the first 
direction-reveal element. 


<div class="grid”> 

<div class=’’space”> 
<div class=’direction-reveal direction- 
reveal-swing”> 
<a href=”"#” class=’direction-reveal__card’’> 
<img src=”images/wind. jpg” alt=”Image” 
class=” img-fluid”> 
<div class=’direction-reveal__overlay 
direction-reveal__anim--in’> 
<h3 class=’direction-reveal__title’>Image 
title is here</h3> 
<p class=’direction-reveal__text”>A full 
description goes here</p> 
</div> 
</a> 


2. Content to reveal 
The last content was made up of an image and the reveal 
that will Swing in’ when the mouse is moved over the 
image. The content here shows a little context, but not 
too much as the main text description will show when the 
mouse moves over. This will be placed next to the image. 
</div> 
</div> 
<div class=”box’> 
<div class=”infoWrap”> 
<h2>Web Design<br> 
<span>Wind - Augmented Reality Interface</ 
span><br> 
April 2018</h2> 


<p>Some initial context provided here for 
the user to grab their interest in the 
project.</p> 

</div> 

</div> 
</div> 


3. Add the style sheet 


It’s time to link up the style sheet now. In the head section 

add the link to the ‘page-design.css file. Open that file to 

see some initial design styling. This makes a start but 

more needs to be added to set up the grid and other 

elements of the design for the reveal elements. 

| <link rel=’stylesheet” href=”css/page- 
design.css’> 


4. Setting up the grid 
The CSS styling here should be added before the media 
query as this is for the tablet and mobile design, just to 
keep everything full width in the browser. Later in Step 9, 
the media query will have the design set for a much 
larger screen, but this is taking a mobile-first approach. 
.grid { 
display: flex; 
flex-wrap: wrap; 
flex-direction: 
3 
.grid > div { 
display: flex; 
flex-basis: 100%; 
3 


row; 


5. Full width images 
The images in the grid are going to be set so they always 
fill the full width of the container that is holding them, 
regardless of what size that container is. The text on the 
direction reveal is set so that there is 5Opx of space on 
the right-hand side of the display. 
.img-fluid { 
max-width: 100%; 
height: auto; 
vertical-align: middle; 
border-style: none; 
J 
.direction-reveal__text { 
padding: @ 5Q@px @ Q; 
} 


6. Title and overlay 
The title of the revealed text is given some padding to the 
top so that it isnt too close to the top of the image. The 
whole overlay is set to include the border and padding in 
its sizing. This isnt So important here, but will be on the 
larger desktop styling. 
.direction-reveal__title { 
padding: 5@px @ @ Q; 
color: #56cl1c1; 
} 
.direction-reveal__overlay { 
box-sizing: border-box; 
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7. Keeping it in check 
At the bottom of each row will be a little soace so that the 
images are not too close together. The info panel to the 
side of the image is in the flex display, so it will fill the size 
of the image. The text will be placed at the bottom of the 
display, due to the ‘auto’ setting for ‘margin-top. 
.space { 
margin-bottom: 6@px; } 
.infoWrap { 
padding: @ Q@ 5@px 2@px; 
margin-top: auto; 
color: #6ca7a7; } 


8. Text styles 


The text inside the infoWrap is set now so that the 
heading displays at the right size and the span section for 
that is much larger with the right colour. Finally the 
paragraph section is set to display in a mid-grey colour, 
and that means all the text in that area is correctly styled. 
.infoWrap h2 { 
font-size: 14px; } 
.infoWrap h2 span { 
font-size: 32px; 
color: #333; } 
.infoWrap p { 
color: #999; } 


oY 
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Top With the CSS in place at this point the design works 
fully on mobile and tablet-sized screens 


Mobile first 


This just refers to the order of your CSS in which 


you target the mobile design first in your CSS 
then build up other screen sizes using media 
queries rather than starting with desktop first. 
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9. Moving into the media query 
Inside the media query add the following section of code. 
This ensures that the grid moves out of the way of the 
side panel and each block is set to be a 50% column in 
the grid so that it flows correctly through the design for all 
the images and text that will be added. Save the style 
sheet now. 


.grid { 
margin-left: 12Qpx; 
i 
.grid > div { 


flex-basis: 50%; 
flex-direction: column; 


I 


10. Adding the JavaScript 


Move back to the ‘index.html’ page and add the following 
code here for the JavaScript to link it up to the page. Save 
the ‘index/html’ page and switch over to the ‘mains’ 
ready to add the JavaScript code in there that will control 
the way it works. 

I <script src=”js/main. js”></script> 


11. Swings and roundabouts 
Scroll down in the JavaScript file until you find the 
comment to show where the code goes. The default 
setting for direction-reveal is the swing setting. It is set 
here to work on any class that has ‘direction-reveal-swing’ 
attached to it. This moves the new content in as a swing 
movement over the top of the image. 

var directionRevealSwing = (0, _ 

directionReveal2.default) ({ 

selector: 


5 


‘ direction-reveal-swing’ 


It work 


The easiest way to think of Direction-Reveal 
working, is just to target the right CSS class in the 
JavaScript and it triggers the animation from there. 


Making 


Samantha Brodie 


Hello! | help my clients create awesome digital 
experiences to enable meaningful connections 
with their users 


Wind - Augmented Reality Interface 


Top 

Here the first direction reveal is shown moving in from 
the left because that’s where the mouse has entered the 
image from 


Right 

On the second image, with the mouse moving from the 
bottom of the screen onto the image, you can see the 
direction-reveal here is sliding over the top from the 
bottom of the image 
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12. Next section 
Save the ‘mains’ file now and test the whole thing in the 
browser to see the content working and swinging in and 
out depending on which side the mouse enters or leaves 
the image. Now back in the ‘index.html’ add this content 
before the closing ‘grid’ div tag 
<div class=’space”> 
<div class=’direction-reveal direction- 
reveal-slide”> 
<a href=”"#” class=’direction-reveal__card’’> 
<img src=” images/pearson. jpg” alt=”Image” 
class=” img-fluid”> 
<div class=”direction-reveal__overlay 
direction-reveal__anim--in’’> 
<h3 class=’direction-reveal__title’”>Image 
title is here</h3> 
<p class=’direction-reveal__text”>A full 
description here.</p> 
</div> 
</a> 
</div> 


13. Sliding into place 
The content in the previous step and this step is revealed 
using the ‘direction-reveal-slide’ class. This will slide the 
overlay over the top of the image. The image will remain 
in place and the overlay will just move. At the end of the 
tutorial there’s a way to also push the image as well. 
</div> 
<div class=”box”’> 
<div class=”infoWrap”> 
<h2>App Design<br> 
<span>Pearson Airport Watch App</span><br> 
March 2018</h2> 
<p>Some initial context provided here for 
the user to grab their interest in the 
project.</p> 
</div> 
</div> 


14. Slide reveal 


Over in the ‘main.js add this under what you added 


A full description of what this web project is goes in here as a portfolio item, so the 
user can decide if they want to click and see this in more detaiL 


previously. This shows some further settings; the main 
points to look at are the type of animation and that this is 
also touch enabled for mobile devices. The touch 
threshold is how long it should be pressed. This is a 
quarter of a second and prevents it accidentally being 
pressed when scrolling. 

var directionRevealSlide = (@, _ 

directionReveal2.default) ({ 


selector: ‘.direction-reveal-slide’ , 
itemSelector: ‘.direction-reveal__card’, 
animationName: ‘slide’, 


enableTouch: true, 
touchThreshold: 250 


ioe 
15. Testing the slide 


Save ‘main.js and refresh your browser to see the 
next section added, this time with the slide working 
from the direction of movement. Back in ‘index.html add 
this code before the closing tag of the ‘grid’ div. This 
places the next section onto the screen and this will use a 
‘rotate’ animation. 
<div class=’’space”> 
<div class=’direction-reveal direction- 
reveal-rotate”> 
<a href=”"#” class=’direction-reveal__card’’> 
<img src=” images/theme. jpg” alt=”Image” 
class=” img-fluid”> 
<div class=”direction-reveal__overlay 
direction-reveal__anim--in’> 
<h3 class=’direction-reveal__title’”>Image 
title is here</h3> 
<p class=’direction-reveal__text”>A full 
description here.</p> 
</div> 
</a> 
</div> 


16. Complete the content 

Adding in this section of code completes that area on the 
screen, SO save ‘index.html’ as this row is now finished. 
The image, image overlay and side panel of text are all 
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ready for the JavaScript to control the rotation effect 
on this. 
</div> 
<div class=”box’> 
<div class=”infoWrap”> 
<h2>Web Design<br> 
<span>Ongoing Wordpress Theme Design</ 
span><br> 
February 2018</h2> 
<p>Some initial context provided here for 
the user to grab their interest in the 
project .</p> 
</div> 
</div> 


17. Rotating reveals 
Back in ‘mainjs add this code under the code that was 
previously added. This takes any div with the class of 
‘direction-reveal-rotate’ and adds the rotate animation for 
the overlay section onto this. Save this and refresh the 
browser, and the new content will have a rotation overlay 
that is triggered from the side that a user’s mouse moves 
over it from. 

var directionRevealRotate = (@, _ 

directionReveal2.default) ({ 

selector: ‘.direction-reveal-rotate’ , 


animationName: ‘rotate’ 


3 


18. Next reveal 

The final reveal section will feature a flip animation which 
swings the card around 180 degrees to reveal the content 
over the top. To start with just the overlay will flio around 
but later the image can also be flipped as well to give a 3D 
card effect to this animation. 

H <div class=’’space”> 


Tutorials 


Add interactive directional images 


<div class="direction-reveal direction- 
reveal-flip”> 

<a href="#” class=”’direction-reveal__ 
card”> 

<img src=”images/photo. jpg” alt=’Image” 
class=” img-fluid”> 

<div class=”direction-reveal__overlay 
direction-reveal__anim--in’> 

<h3 class=’direction-reveal__title’>Image 
title is here</h3> 

<p class=’direction-reveal__text”>A full 
description here.</p> 

</div> 

</a> 

</div> 


19. Side panel 
Now the content for the side panel is created just to 
complete this section of the design. Save the ‘index.Atml’ 
page now and switch over to the ‘mains file ready to add 
in the code that will pick up the selector and trigger the 
animation here. 
</div> 
<div class=”box’> 
<div class=” infoWrap”> 
<h2>App Design<br> 
<span>Capture - Phone Image Editing App</ 
span><br> 
January 2018</h2> 
<p>Some initial context provided here for 
the user to grab their interest in the 
project.</p> 
</div> 
</div> 
</div> 


Making it work 

on mobile 

You may be wondering 
exactly how this works on 

a mobile or tablet device, 
given that there is no mouse 
to rollover the image. In 
step 14 the ‘enableTouch’ 
option is set to true; do 

this on all images that you 
want to work on mobile. 
The way it works is that 

to enable scrolling when 
the user flicks, there is a 
threshold that it will wait 

for before triggering the 
animation. The default is 
250 milliseconds, so when 

a long press is detected 

the animation will happen. 
That’s the first part. If this is 
a link then the user needs to 
be taken to a link. Tapping 

a second time will fire the 
link and thus take the user 
to anew page. Because 
Direction-Reveal has 
thought about the usability 
of something like this, it 
makes it simple to work with. 


Ongoing Wordpress Theme Design 


Capture - Phone Image Editing App 


Top The last direction-reveal is a flip effect that spins the 
overlay into position on top of the image 


20. Flipping awesome 
In the ‘main.js add this code just after the last code that 
you added. Save the page and refresh your browser. This 
section will flip over 18O degrees as you move your 
mouse over and it flios from whichever side you enter the 
image from. Let’s make the image also flip as well. 
var directionRevealFlip = (@, _ 
directionReveal2.default) ({ 
‘ direction-reveal-flip’ , 
‘Tap 


selector: 
animationName: 


Ds 
21. Final touch 


Back in the ‘index.html’ page, go back to the last image 
you added in step 18. Add an extra class ‘direction- 
reveal. _anim—out’. Refresh your browser to see the 
image flip. If you use this class on the other images it will 
also make the image animate out as the overlay enters, so 
experiment with this for dramatic results. 
<img src=”images/photo. jpg” alt=”Image” 
class=’direction-reveal__anim--out img- 
fluid’> 
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Learn how to use CSS, SVG and JavaScript to add a tilting 
effect to Ul elements to add engagement to landing pages 
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= CHECK THE CODEPEN 
tutorial vy codepen.io/2975/full/WJwxYv 


nimation applied to user interface 
elements have now become much 
more prominent and are no longer the 
delightful surprises they once were - 
now, they’re expected. 

The explosion of prototyping tools in the past few 
years has given web designers an opportunity to create 
detailed interactions and animations. These tools also 
give Us an opportunity to learn new ideas and 
understand the purpose of the animation without getting 
to heavy. However, in frontend development, DOM 
elements can now be easily animated using CSS, and 
together with JavaScript and SVGs, you can create some 
amazing UI animations. 

So in this tutorial we will create a couple of Ul elements 
for a fictitious restaurant and give them a nice hover 
effect that will include SVGs, CSS animations and a jQuery 
plugin that creates a tilting and glare effect. And to make 
things easy for us, we will do this using CodePen. 


1. Getting set up 

Open up CodePen at - codepen.io - and create a new 
pen. Within the settings, make sure the CSS section is set 
to Sass (scss) and choose ‘normalize’ as the CSS base. 
The first bit of HTML we will add will be a section tag, and 


within that an anchor tag, which has two classes: ‘animate’ 


and ‘tiltone’ 
<section class=’content”> 
<a href=”"#” class=”animate tilt-one’> 
</a> 
</section> 


2. Figure tag and image 
Within the anchor tag that we just added in the last step, 
create a ‘<figure> tag and give it two classes: ‘tilt-figure’ 
and ‘card’. Then choose an image that represents a 
restaurant and place that in between the figure tag. 
<figure class=”’tilt-figure card’> 
<img class=”’tilt-image” src=”"https://image. 
ibb. co/ggf8ZH/restaurant_small. jpg” 
alt=”"img07” /> 
</figure> 


3. The image and caption 
In the last step we used the ‘<figure> tag. The figure tag 
specifies self-contained content such as photos and is 
intended to be used in conjunction with the <figcaption> 
tag and this is ideal for what we need. So within the figure 
tag and underneath the image link we've already added, 
we can add in a caption. 
<div class=”tilt-deco tilt-deco--overlay”></ 
div> 
<figcaption class=”tilt-caption”> 
<h3 class=’tilt-title”’>Our Restaurant</h3> 
<p class=”tilt-description”>Book a Table</ 
p> 
</figcaption> 


4. Border lines using SVG 
SVG (scalable vector graphics) is now becoming one of 
the most effective and easiest ways of animating on the 
web (see the in detail section to learn more). So within the 
figure tag, we can use SVG to add in a border. We can 
target the SVG by given it a class name(s) and then 
manipulate it using CSS in a later step. 

<svg class=”tilt-deco tilt-deco--lines” 

viewBox=”"0 @ 300 415”> 

<path d=”M20.5, 20.5h26@v375h-260V20.5z” /> 
</svg> 


5. Second Ul element 
The first Ul element - which we will now call ‘card’ - will be 
for booking a table. The second one we will now add is 
going to be for booking a room. The only difference we 
have is that we've added a new class called ‘data-tilt’ 
which we will use for our jQuery. So make sure you also 
add that to the first card. 
<a href="#” class=’animate tilt-one’’> 
<figure class=”’tilt-figure card” data- 
tilt> 
<img class=”tilt-image” src=”"https:// 
image. ibb.co/b2EK8c/rooms. jpg” alt=”"imgd7” 
/> 
<div class=”tilt-deco tilt-deco-- 
over Lay”></div> 
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<figcaption class=”tilt-caption”> 
<h3 class=’tilt-title”’>Our Rooms</h3> 
<p class=’tilt-description’>Book now</p> 
</figcaption> 
<svg class=”tilt-deco tilt-deco--lines” 
viewBox=”"@ @ 300 415”> 
<path d=”M20.5,20.5h26@v375h-260V20.5z” /> 
</svg> 
</a> 


6. Sass variables 
As were using Sass we can specify a few default variables 
that we will use for background colours. Then underneath 
our variables we will make sure that all elements have the 
‘box-sizing’ property by using the” selector. 
$lightBurgundy: rgba(214, 100, 40, 0.6); 
$lightPurple: rgba(16, 11, 192, @.5); 
x, *x::after, *::before { 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 


I 


7. Background colours and image 
By adding a background image that fills the whole page, 
this gives us a nice look and feel. To help with that even 
further, we will add a linear gradient overlay using the 
Sass Variables we specified earlier. We do need to make 
sure though that our image has a height set to 1OOvh 
(viewport height). This will allow our image to stretch 
according to the viewport. 
body { 
font-family: ‘Roboto’, Arial, sans-serif; 
color: #463f51; 
background: linear-gradient(to right, 
$lightBurgundy, $lightPurple) , 


Project images 


When using CodePen for your projects and you 
need to use some images, it’s often a good idea 
to use a free image hosting service, such as 
https://image.ibb.co 


Left 

Using Sass variables, we’ve given our 
background image a nice linear 
gradient overlay 


Top 

Using Flexbox on the content section 
we Can use several Flexbox properties 
to align and centre our cards 
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url( ‘https: //image. ibb.co/cHB5gx/ 
architecture_bar_business_791810. jpg’ ) 
center no-repeat; 

background-size: cover; 

height: 10Qvh; 
} 


8. Colour transition 
All the content within our cards are wrapped within an 
anchor tag, and on hover this content will appear from 
the bottom of each card and animate up. To give this a 
better effect we will first set the default text colour to our 
light burgundy variable and then use a colour transition 
to change it to white for its final state. 
a { 

outline: none; 

color: $lightBurgundy; 

text-decoration: none; 

transition: color Q.2s; 


} 

a:hover, a:focus { 
color: #fff; 

} 


9. Using Flexbox 
To help align and centre our cards, we can use Flexbox 
on the content section. This will allow us to use a number 
of Flexbox properties that will align, centre and space out 
our cards evenly. 
.content { 

display: flex; 

flex-wrap: wrap; 

align-items: center; 

justify-content: space-evenly; 

padding: @ Q 4em; 


Figma for your icons 


If you’re good at designing and would like to try 
and design your own vector icons, then we would 
recommend trying out Figma https://www.figma. 
com - which is ideal for this type of work. 


Top 

To create a white border we first remove the fill of our 
black rectangle and then give this a white stroke with a 
width of 3.5 pixels 


Right 

The tilt jQuery plugin has been added and if you 
hover over the edges of a card you will get to see how 
far these tilt 
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height: 75Qpx; 
min-height: 10Qvh; 
position: relative; 


i 


10. Card sizing 
We now need to set the size of the cards. Firstly though, 
we will clear any margins, and then set the width and 
height of both the figure tag and the image to 100%. 
Then lastly we need to make sure these are displayed as a 
block level element. 
.tilt-figure, 
.tilt-image { 
margin: Q; 
width: 100%; 
height: 100%; 
display: block; 
} 


11. Drop shadow 
Creating a drop shadow using CSS is pretty 
straightforward these days, however were going to do 
this a little different and create a hidden element which 
will go behind the main card and then put a shadow on 
that. Doing this will give us a bit more control of how the 
Shadow Iooks. 
.tilt-figure::before { 
content: ‘’; 
position: absolute; 
width: 90%; 
height: 90%; 
top: 5%; 
left: 5%; 
box-shadow: @ 3@px 20px 
rgba(35,32,39,0.6); 
} 


12. Card overlay 

The ‘tiltdeco’ class will be used a couple of times and its 
purpose is to create a shape that we will place over the 
main card, and then we will create a linear gradient 
overlay using rgba colours. We will tone down the 


Our 
Restaurant 


Book a Table 


gradient colour in a later step. 
.tilt-deco { 
position: absolute; 
top: Q; 
left: Q; 
width: 100%; 
height: 100%; 
overflow: hidden; 
i 
.tilt-deco--overlay { 
background-image: linear-gradient(45deg, 
rgba(226, 60, 99, 0.4), rgba(145, 58, 
252, 0.4), 
rgba(16, 11, 192, @.4)); 
} 


13. The white border 


By using the shape we created in the last step, we can 
now use our SVG path and create a white border that will 
sit inside our card. Firstly we should make sure the fill is 
set to ‘none’ and specify that the stroke is set to white with 
a width of ‘3.5’ pixels. 
.tilt-deco--lines { 
fill: none; 
stroke: #fff; 
stroke-width: 3.5px; 
J 


14. Caption, title and description 
Our caption, which holds our title and description, will be 
positioned at the bottom of the card. Then we will give 
the title and description some default styles. We've given 
the description a good amount of letter spacing so it 
appears that we're using two different fonts. 
.tilt-caption { 
position: absolute; 
bottom: Q; 
width: 100%; 
padding: 4em; 
7 
.tilt-title { 
margin: Q; 


The complete guide to SVG 


By Steven Roberts 18 days ago Web design 


Discover why you should be using Scalable Vector Graphics and 
now to design and implement them. 
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More about SVG 


Poorly supported and largely ignored for most of 
the 2000s, in 2017 all modern web browsers can 
render SVG - and most vector drawing programs 
export it. SVG is the one graphic format that most 
closely responds to current web development 
demands of scalability, responsiveness, interactivity 
and performance. 

SVG is an XML language and file format, which 
allows you to code two-dimensional graphics that 
scale and can be manipulated via CSS or JavaScript. 

All SVG graphics are plotted on a coordinate 
system of at least an x and y axis. When authoring 
SVG, we give the browser instructions on where to 
plot points on the coordinate system and connect 
them. By connecting the plotted points we can 
create shapes, lines or paths. 

The <svg> tag allows you to add in custom 
classes, which then gives you more control using 
CSS or JavaScript. Also within the tag you're givena 
attribute called ‘viewBox’. The value of the viewBox 
is a list of four numbers that represent the ‘x’ and ‘y’ 
axis as well as the width and height, all in that order. 
<svg class=”yourClass” viewBox=’0 @ 300 


font-weight: normal; 
font-size: 2.2em; 
font-family: ‘Roboto’, serif; 
line-height: 1; 

} 

.tilt-description { 
margin: lem Q @ Q; 
font-size: @.85em; 
letter-spacing: Q.15em; 


I 


15. Extra overlay colours 
As | mentioned in a previous step, we are going to tone 
down the first overlay by adding another. We could use 
the Sass variables again, but we wanted this to have a 
darker overlay at the bottom so the text blends better for 
when we animate the text up on hover. 
.tilt-one .tilt-deco--overlay { 
background-image: linear-gradient(2deg, 
rgb(214, 100, 40), rgba(46, 39, 173, 0.58), 
rgba(53, 74, 165, 0.6)); 
I 


16. Animations 
This is where the fun begins. Now we can begin to 
animate the title, the description and the white SVG 
border. As we said in the last step, you can now see the 
title and description appear from the bottom colour andi it 
gives us a nice effect. 

.tilt-one .tilt-deco--lines { 

transform: scale3d(@.8,0.8,1); 

transition: transform Q@.4s; 

J 

.tilt-one:hover .tilt-deco--lines { 

transform: scale3d(1,1,1); 

J 

.tilt-one .tilt-title, 

.tilt-one .tilt-description { 


transform: translate3d(@, 80px,@); 
Opacity: Q; 

transition: transform @.4s, opacity 0.4s; 
} 

.tilt-one:hover .tilt-description { 
transition-delay: Q.1s; 

3 

.tilt-one:hover .tilt-title, 
.tilt-one:hover .tilt-description { 
transform: translate3d(0,0,Q); 
opacity: 1; } 


17. Optional icons 
This is an optional step and will involve creating a 
more detailed SVG icon(s). There's plenty of online 
resources that allows you to download icons in SVG 
format, so try and find a couple that represents a 
restaurant table and a bed. 

.Svg-icon { 

transform: translate3d(13@px, -2@@px, Q); 

opacity: 1; 

transition: transform @.4s, opacity 0.4s; 
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18. Animate the icons 
In the previous step we set the opacity of our icons to be 
visible. And then we positioned it in the centre. In this step 
we will now add in some animation that will move the 
icon up and as it does so, it will gradually fade out. 
.tilt-one:hover .svg-icon { 
transform: translate3d(13@px, -25@px, Q); 
opacity: Q; 
transition: transform @.4s, opacity @.4s; } 


19. Adding the tilt jQuery 


To create the tilting effect we are going to use a jQuery 
plugin which you can get from its github repo: https:// 
github.com/gijsroge/tilt.js. Do make sure you include 


415”> <path d=”M20.5,20.5h26@v375h- 
260V20.5z” /></svg> 
For more SVG info go to https://bit.ly/2ryLgff 


the CDN link into CodePen (within the JS settings) and 
then in the JS section add in the jQuery shown. 

(function( $ ) { 

“use strict”; 

$(“. card”). tilt({ 

maxTilt: 10, 

perspective: 140Q, 

easing: “cubic-bezier(.@3, .98,.52,.99)”, 


speed: 1200, 
scale: 1.05 
}); 


}( jQuery )); 


20. Adding some glare 
There's quite a bit we can do with this handy little plugin, 
SO go ahead and play around with the values. However, 
one nice effect we can use is the glare effect. We don't 
want too much of a glare so set it to around ‘O.3’ and 
youll see how nice and subtle this now looks. 

(function( $ ) { 

“use strict”; 

$(“. card”). tilt({ 

maxTilt: 10, 

perspective: 140Q, 

easing: “cubic-bezier(.@3, .98,.52,.99)”, 

speed: 1200, 

glare: true, 

maxGlare: 0.3, 

scale: 1.05 


13 
}( jQuery )); 


21. Final thoughts 


Ul animation and interactions are certainly a nice skill 
to have. You cant develop a website, web app or mobile 
app without using some sort of animation. But try not 
to over do it as this could have a negative effect on the 
user experience. 
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Animate text using 
WebGL techniques 


In this tutorial, you will learn how to animate text on our 
webpage using Three.js and advanced WebGL techniques 


sie 
ay! 


,¢ 
ws 


aL: 
- 


74 

) ~ 
x 

. \ 
~— Lo 7 Ss 
Se ‘ + 
SVS ie 4 
i ee 4 


| 


= i, 
\ . eo "/ . 
y , 
; . 


CCK and Grag to control the animation 


> TL > “ILE 
) 


7 ai : : Ee a z 
filesilo.co.ul abdesiqnet 


he beauty with front-end development 
is that, as a developer, you have access 
to numerous technologies that you can 


use to display interactive content on the 
web. From the popular CSS and Canvas to SVG and 
plugin-based alternatives such as Silverlight and Flash, the 
options are endless. However, the evaluation of some of 
the top ranked interactive websites (https://www. 
awwwards.com/websites/web-interactive) reveals a 
Significant trend: the wide scale adoption of WebGL 
techniques in displaying content in landing pages. The 
evaluation revealed that top ranked websites not only 
adopted 3D graphics on the web platform, they also 
introduced a rich interactive experience, a feat that was 
previously possible through using plugins. As such, the 
inspiration in developing the tutorial arose from the desire 
to create simple yet impactful interactive content using 
WebGL techniques. In developing the tutorial, we use 
Threejs, an open source, lightweight JavaScript library for 
creating 3D graphics on the web. Essentially, the library 
acts as an abstracted layer on top of WebGL, making it 
much easier to use. Three js enables you to create 
advanced graphics by writing only a few lines of code. In 
this tutorial, we will learn how to use the library to create 
an interactive text animation on your website. 


1. Getting started 


Begin by creating a folder, ‘text_reveal’ on your desktop to 
Store the tutorial files. Create two additional folders within 
it: CSS to store the styling files, and JS to store JavaScript 
files. HTML files will be stored in the root folder. 


2. Creating the HTML 
page structure 
Open your code editor and create an index.htm 
document to contain mark up for the main webpage. 
Begin by creating the basic structure and give a suitable 
title to the page. 

<! DOCTYPE html> 
<html lang=”en’> 
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V4 


The HTML5 Creation Engine 


Create beautiful digital content with the fastest, most flexible 
2D WebGL renderer. 


DOWNLOAD —> 


GET STARTED —> | 


Created by good boy , 


<head> 
<meta charset=”"utf-8’> 
<title>Three JS Text Animation </title> 
</head> 
<body> </body> 
</html> 


3. Adding content to the 
HTML structure 


Essentially, we would like to display the animation on the 
main area of the screen and have a lower section that 
Gives instructions to users regarding their actions on the 
page. Create two divs in the body section: three-container 
where the animation will be displayed and instructions 
where the user instructions are displayed. Render the 
page in your browser. 
<body> 
<div id=”three-container”></div> 
<div id=”instructions”> 
click and drag to control the animation 
</div> 
</body> 


4. Linking the CSS file 


Currently, the page has no styling to it and it appears very 
basic. We are interested in styling the two divs in order to 
have them placed at the centre of the page. Open your 
code editor and create a ‘styles.css file inside the CSS 
folder. Create a link to this file in your HTML document by 
adding the following code in the head section. Render the 
page in your browser. 

<link rel=’stylesheet” href=”css/styles.css” 
|; 
5. Styling the webpage - styling 
the body 


Begin by setting the margin to O for all elements in CSS. 


Three.js alternatives 


Despite its popularity, Three.js is not the only 
JavaScript library making WebGL easier. Other 
popular libraries include Greensock, Play Canvas 
and Pixi.js. However, Three.js is recommended 
given that it is easier to learn. 


click and drag to control the animation 


Top 

This illustrates the structure of the page. Only 
the instructions are displayed since JavaScript 
controls the main div 


Right 

The cloth animation (https://bit.ly/2wD34vM) 
provides the style applied in this tutorial. Shown 
here without the cloth or ball aspects. 
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This ensures the design remains consistent throughout 
the page. Next, add an overflow with the hidden 
parameter. This cuts off any content that breaks out of its 
bounds. At this point, you should not notice any change 
{ 
margin:Q; 
overflow: hidden; 


} 
6. Styling the divs 


We only style the instructions div as JavaScript 
controls much of the actions that occur in the main div 
displaying the animation. Add the following styling code 
in the CSS file. 
#instructions { 
position: absolute; 
color: #666; 
bottom: Q; 
padding-bottom: 6px; 
font-family: sans-serif; 
width: 100%; 
text-align: center; 
pointer-events: none; 
} 
The code simply directs the div to move relative to the 
main div as the page is scrolled. 


7. Setting up JavaScript 
environment 

JavaScript’s security feature, same-origin policy, restricts 
the execution of any externally hosted files in your 
JavaScript code. This offers a challenge since Three js 
requires to load geometry, textures and other files. Two 
alternatives exist to solve the challenge. We can opt to set 


Learning from 
examples 


One of the best ways to learn Three.js is through 
reviewing numerous applications of the code. Head 
over to https://threejs.org/examples where there 
are tons of examples of how Three.js is used. 


Top 

The image illustrates the animation of the text in a blowing 
wind-like simulation. Only some of the characters can be 
seen as the animation progresses 


Right 

The image illustrates the animation of the text once the 
wind has blown it into particles. None of the characters are 
recognisable since they are animated 
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up a local server using WAMP or XAMPP applications, or 
host the files on free servers. 

The second alternative offers a much easier solution as 
you can reuse the files already hosted thereby saving you 
time. Simply copy the following script tags below the 
instructions div. 

<script src=’http://cdnjs.cloudflare.com/ 
ajax/libs/three. js/r75/three.min. js’ ></ 
script><script src=’https://s3-us-west-2. 
amazonaws.com/s.cdpn.io/175711/bas. js’ ></ 
script><script src=’https://s3-us-west-2. 
amazonaws .com/s.cdpn.i0/175711/TextGeometry. 
js’ ></script> 
<script src=’https://s3-us-west-2.amazonaws. 
com/s.cdpn.i0/175711/FontUtils. js’ ></script> 
<script src=’https://s3-us-west-2.amazonaws. 
com/s.cdpn.i0/175711/pnltri.min. js’></ 
script> 
<script src=’https://s3-us-west-2.amazonaws. 
com/s.cdpn.i0/175711/droid_sans_bold. 
typeface. js’ ></script> 
<script src=’http://cdnjs.cloudflare.com/ 
ajax/libs/gsap/1.18.0/TweenMax.min. js’></ 
script> 
Each JavaScript file plays a different role as is explained 
later in the tutorial. You should not observe any change in 
the webpage. 


8. Creating the text animation 
To create the text animation, begin by creating a new file, 
‘textanimatejs: in your JS folder. Since we would like the 
animation to run when the window loads, capture this 
using the init function as below. 
window.onload = init; 
function init() { 
var root = new THREERoot({ 
createCameraControls: false, 
antialias: true, 
fov:60}) ; 
The code creates a new variable root which is assigned 
three parameters using the THREERoot function. The first 
informs that the camera controls are not turned on while 


the second enables antialiasing in order to smooth out 
any jagged lines. The last sets the field of view to 60 in 
order to view the animation comfortably. 


9. Setting up the scene 

Next, set up the scene where the text animation will take 

place. Change the background colour and set up the 

camera position. Copy the code below. 

root.renderer.setClearColor (@x3AAFAQ) ; 
root.renderer.setPixelRatio(window. 

devicePixelRatio || 1); 
root.camera.position.set(@, @, 400); 


10. Create the text 
animation variable 
Create a text animation variable and assign the function 
createTextAnimation Q. The function controls the nature 
of the animation and will be defined later. Next, identify 
the exact position (based on the y axis) where the 
animation will play at. For instance, in this case, the 
position is set at y = - 10. Afterwards, add the variable to 
the scene 
var textAnimation = createTextAnimation() ; 
textAnimation.position.y = -10; 
root.scene.add(textAnimation) ; 


11. Set up the timeline 
animation aspects 
The TweenMax.min.js file referenced earlier offers useful 
animation features. Among these is the TimelineMax 
function which helps set the repeat, delay and yoyo 
aspects. By yoyo, this implies the animation moving back 
and forth in a yoyo-like manner. Setting yoyo to false turns 
off this feature. A repeat of -1 makes it loop. Simply copy 
the code below. 
var tl = new TimelineMax ({ 
repeat: -1, 
repeatDelay:@.25, 


yoyo: true 

is 

tl.fromTo (textAnimation, 4, //4 
{animationProgress:Q.Q}, 
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{animationProgress:1.0, ease:Powerl. 
easeInOut}, 
ae 
createTweenScrubber(tl); } 


12. Create the text to be animated 
Next, create the text to be animated using the 
generatelextGeometry function. Type in the text you 
would like to be revealed, its size, height and font features. 
Note that earlier, ‘droid sans boldtypefacejs and 
‘TextGeometry,js files were loaded. These control the font 
and geometry aspects. 
function createTextAnimation() { 
var geometry = generateTextGeometry (‘GONE 
WITH THE WIND’, { 
size:14, 
height :@, 
font: ’droid sans’, 
weight: bold’, 
style: ’normal’ , 
anchor: {x:0.5, y:0.5, z:0.@} 
spe 
THREE.BAS.Utils.separateFaces(geometry) ; 
return new TextAnimation(geometry) ; 
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13. Code the animation 
characteristics 
Next, we define how the animation should behave. The 
aim would be to simulate blowing by the wind from the 
lefthand side and once particles have disintegrated, 
recreate the text from the right-hand side. 
function generateTextGeometry(text, params) 
{ 
var geometry = new THREE. 
TextGeometry(text, params) ; 
geometry. computeBoundingBox() ; 
geometry.userData = {}; 
geometry.userData.size = { 


Simple Cloth Simulation 
Verlet integration with relaxed constraints 


Wind | Ball | Bins 


width: geometry.boundingBox.max.x - 
geometry .boundingBox.min.x, 
height: geometry.boundingBox.max.y - 
geometry. boundingBox.min.y, 
depth: geometry.boundingBox.max.z - 
geometry .boundingBox.min.z 
a 
var anchorX = geometry.userData.size.width 
* -params.anchor.x; 
var anchorY = geometry.userData.size. 
height * -params.anchor.y; 
var anchorZ = geometry.userData.size.depth 
* -params.anchor.z; 
var matrix = new THREE.Matrix4(). 
makeTranslation(anchorX, anchorY, anchorZ) ; 
geometry. applyMatrix(matrix) ; 
return geometry; } 
To investigate the code providing the functionality, click 
view source at the bottom-right corner. This should take 
you to its respective github page from where you can 


Learning 
through example 
The website, https:// 
threejs.org presents 
numerous real world 
applications detailing 
how the library is used in 
creating different visual 
effects. Additionally, a 
link further below in the 
site, (https://threejs. 
org/examples), provides 
access to diverse 
examples that you can 
learn from. However, it 
may appear daunting at 
first before you get to 
know your way around. 
To help you get started, 
click the very first 
example https://threejs. 
org/examples/#webgl_ 
animation_cloth. This is 
the animation that you 
will see. 


view the code. Copy the code to your code editor and 
customise it to your preference. 


14. Adding important classes 

Now that we have added the required functions for the 
animation, we need to append different classes required 
to initiate the WebGL constructs. 


15. Adding important ‘utils’ 
Additionally, add the code (from FileSilo) to help control 
the interactive aspects of the animation. The code 
provides interactivity in resoonse to mouse events such 
as mouse Up, Mouse down and movement of the mouse. 


16. Initiating the animation 

At this point, all the code necessary to initiate the 
application is set. To initiate the text animation, add the 
following line of code beneath the last script tag entered. 
— <script src = “js/textanimate. js”></script> 
The final outcome should appear as below. 
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Why and how to add 


the power of sound 
to your projects 


“Sound, even 
more than 
visuals, is 
capable of 
making our 
mind believe we are in 
another world. It 
communicates ona 
deep level, directly 
tapping into our brains.” 


Richard Mattka 


Award-winning interactive 
director, designer and developer 
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THE IMPORTANCE OF SOUND 


Put the power of sound to work in your sites and applications 


Sound is a critical element when 
making experiences engaging and 
compelling. If you need proof, try 
playing your favourite game or 
watching your favourite movie 
with the volume off. 

Ambient city noises, distant 
sirens, and low rumbling hums, 
drop you into the scene, even 
without the visuals. Sounds create 
the mood and set the pace of an 
interactive experience. Music 
enhances the suspense, ramps up 
the intensity, and ultimately 
triggers an emotional response, 
much more powerfully than 
visuals alone. 

Sound is capable of transporting 
us to another world as it 
communicates on a deep level, 
directly tapping into the brain. 
Psychology studies have found 
music and sound connect ona 
instinctive level in the brain, into 
our most primal selves. 

Immersive sites, such as world 
building models, in-world web 
experiences and games are greatly 
enhanced with great sound effects 
and musical scores. 

Sites and applications with 
engaging animations, dynamic 
visuals or 3D, depend on solid 
sound design. But, even the 
simplest sites can benefit from 


user feedback and meaningful 
Signals through audio. 

In your projects, sounds can 
form part of the reward system in 
completing tasks. For example, 
sound effects that trigger with 
completing a puzzle make the act 
much more satisfying. A pleasant 
chime as a bar fills up, or as the 
user achieves a specific goal - 
these all work together to give 
short-term rewards, while the user 
works towards a larger goal. 

Sound can provide feedback, to 
complement visual feedback. 
Buttons make noises when clicked, 
a clicking metronome can count 
you in before recording. Sounds 
can help reinforce that something 
was done as a further way to 
acknowledge the user’s actions. A 
Way to say ‘yes’ your interaction 
was received. In some cases, 
sounds can call out something ina 
visually busy landscape. In time 
critical applications, they can more 
rapidly communicate something 
faster than visuals might alone. 

User interfaces (UIs), since the 
earliest days of the command-line, 


have used sound effects in the 
form of simple audible beeps, to 
warn of errors. And today, apps 
such as Twitter or Facebook use 
well-placed sounds for 
notifications and alerts. Skype 
uses audio to facilitate 
communications. As we move into 
technologies away from screens, 
speech and gesture interfaces are 
increasingly dependent on audio 
input and feedback. 

Assistant software and tools 
such as Alexa and Siri give audio 
feedback fuelled by powerful 
artificial intelligence. Audio cues 
and speech recognition can also 
be used to create a better 
experience for those with 
disabilities or learning difficulties. 

With ever increasing support, 
bandwidth and networking power, 
now is the time to put the power of 
sounds and music to work in your 
sites and applications, through 
solid sound design. 
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BREAKING 


DOWN SOUND 


Audio and sound come in many forms. 
Understanding what they are and how 


they work is the key to success 


Above 

The ‘Oblivion’ music video is 
comprised of real-time shader 
animations, synced to audio data for 
precisely timed effects, like travelling 
down this fret-board tunnel 


Sounds are able to create 
powerful reactions on deep, 
instinctive levels. A baby’s cry can 
set a new parent into action 
without conscious thought, a 
sharp warning hiss of a snake can 
trigger adrenaline, and hearing 
that favourite song on the radio 
might bring a smile before you 
realise it. 

Scientists and thinkers have 
been pondering the relationship 


Types of sound 


MUSIC/SCORE 
Imagine your favourite movie 
without the iconic score. Jaws 
without the ominous two-chord 
warning? Star Wars without the 
incredible score, driving the action 
from the first iconic frame? Great 
music has its own life; it’s essential 
to the success of the production. 


AMBIENT SOUND 
In film and game design this is also 
called asynchronous sound. It is 
not directly synced with other 
actions, but forms a mood bed or 
atmospheric sound-scape. Crickets 
chirping, a crackling fire or sounds 
of the city at night. Ambient loops 
that set a tone for the experience. 
Of all the types of sound, this has 


between sound and emotion for 
thousands of years. Modern day 
neuroscience has uncovered 
amazing insights into the 
relationship between our ears, 
minds and emotions. 

Deep within the brain, in the 
Amygdala, we processes 
memories and emotional 
reaction, while the Hippocampus 
controls behaviour and helps 
form memories. Within these 


feature 


——. 


SOUND FX 


Consider each separately, but plan for combining 


the strongest ability to 
subconsciously transport the user 


into the world of the experience. 


Every interaction, achievement 
unlocked and warning can be 


enhanced with sound effects. They 


can reinforce the tone of the 
experience, and communicate 
greater detail quickly to a user. A 
clear warning tone might signal a 
low battery, before the user 
notices the flashing bar. A gentle 
bell or satisfying click when 
pressing a button can encourage 
and make an action more 
enjoyable. The nice pop effect 
when you pull down on Twitter to 
refresh results is a great example. 


The psychology of sound what you hear can trigger a host of different reactions 


most primal sectors of the mind, 
responses are triggered when we 
hear sound. Breathing, heart rate, 
brainwaves and hormone 
secretions are continuously 
affected by incoming audio. 
Sounds are associated with 
experiences and the feelings 
connected to them, both good 
and bad. 

How someone feels at any 
given moment, is very often 


VOICE 
Voiceovers can humanise an 
experience, guide a user with 
instructions, and serve the 
functional roll of communicating 
important information in the 
absence of visuals. For example, a 
navigational app for driving or an 
instructional tool. Pitch recognition 
for tuning an instrument or voice 
recognition to receive commands 
are just a couple of possibilities. 
Voice assistance through apps 
such as Alexa or Siri are rapidly 
becoming part of every expense, 
from using our phone, operating 
our vehicles or setting the mood 
with some music at home. Voice 
recognition in sites and apps is 
growing and will continue to grow. 


affected directly by what they 
hear. People have the ability to 
remember hundreds, if not 
thousands of songs and voices. 
Sounds are remembered more 
easily because of the impression 
they make on your mind, and they 
also are much harder to ignore. 
Hearing someone say your name 
across a crowded room, but 
seeming to ignore everything 
else, is just one example. 


Waveform data visuals 


Audio data can be used to set 
overall levels of intensity and 
power shader inputs like this 


ambient background animation. 


Audio to create 
shader materials 


3D custom shader materials 
can be influenced by audio 
data to create incredible 
surface effects. 


Above 

This audio-driven animation was 
featured at Digital Design Days 
in Milan for the 2018 
conference, as part of the DevX 
Experiment showcase 
(http://devx.ddd.it/en) 


Film and game-makers have 
capitalised on the psychological 
power of sound for years. They 
know how sound can evoke 
emotions. The right music or 
ambient sounds can instantly 
connect an audience to a flood of 
associated feelings. Everyone has 
that favourite game theme song 
or movie score. As soon as they 
hear it, they recall how they ‘felt’ 
when they played it or saw it the 
first time. Perhaps it’s the iconic 


Visualisations and effects 


Power stunning visuals with audio data 


Web Audio API's AnalyserNode lets 
you extract time, frequency, 
waveform and other data from 
your audio. By using features like 
getByteFrequencyData and setting 
the min and max decimal ranges 
you Can zero in on specific aspects 
of audio data. 

Beyond music beds, effects and 
great music, we use sound to also 
drive visuals. Moving beyond 
complimenting or enhancing what 
the user sees, the audio data can 


Super Mario Bros theme or the 
soundtrack from Azeroth in World 
of Warcraft. 

The right sound design, the 
right music, can not only set the 
mood, but emotionally connect to 
people in a way visuals alone 
simply cannot. 


SOUND AND EMOTIONS 

Brain stem reflex 

When loud or dissonant sounds 
are heard, they signal a potentially 


actually drive the animations. 
Simple effects that use the overall 
level (volume) of a music track can 
make your background pulse in 
time with a beat. Swells in the 
musical score can be used to 
change the opacity of an image or 
shift its colour. By tapping into the 
audio data through the Web Audio 
API we delve into frequency and 
waveform data as well. You can 
visualise the sound in an infinite 
number of variations. 


important and urgent event, 
causing us to react on an 
instinctive level. Notifications, 
beeps and sirens are examples. 


Learned response or 
conditioning 

When we have heard a sound 
repeatedly in a certain situation, it 
can often lead to an association 
between that sound and situation. 
Hearing it again, can instantly 
elicit emotions or feelings. 
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Frequency data to sync 
to the beat 


By locking into frequencies with 
Web Audio API Analyzer, you 
can sync object geometry to 
‘dance’ in time with the music. 


Simple effects 
that use the 
overall volume of 
a music track can 
make your 
background pulse 
in time with 
a beat 


Emotional contagion 
Perceiving emotions expressed 
by a piece of music. It doesn't 
have to sound sad. Instead we 
recognise it as conveying 
‘sadness’. Sound is so 
fundamental, that it often 
transcends languages. People 
from diverse cultural backgrounds 
often agree on whether a piece of 
music sounds happy or sad. This 
has led some to term music the 
‘language of emotions’. 


feature 


Interactive installation, 
‘Sound in Performance’, 
focussed on balancing 
sound loop quantity and 
interactions to trigger 
them 


THE CHALLENGES OF SOUND 


Why aren't sounds used more often on websites and apps? 


1. 
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2. Unexpected 


intrusion 

Give users the option to 
disable sound and control 
levels. Let them choose 
their experience, and they 
will often choose to listen. 


Download size and 


streaming limits 

We can overcome this a 
few ways. First, optimising 
sounds through good 
compression, that 
balances quality, size and 
bit rate. MP3 format is 


going to give a good 3. Mobile limitations 
balance of these factors, On most mobile devices 


and audio tools will give audio will not play until 
you options for levels of 
compression. Stream 
larger files instead like 
music and ambient tracks. 
Load FX for instant 
playback. 


A simple solution is to 
start the experience with 
scroll or click event, that 
you can then bind your 


feature 


. Sound overload 


triggered by a user action. 


Sound design for 
interactive Is 


audio star to. Initialise 
ahead, and wait to fire load 


and play events the challenging 

moment you get that first because of the 

interaction. : 
unpredictable 


interactions by 
users. [his requires 
thoughtful 
planning to create 
just the right 

balance in 

real-time sound 

mixes 


Not every action needs a 
sound effect. Sounds 
should serve a purpose. 
Use music and effects that 
inform or enhance the 
experience. Just like a 
good visual designer, don't 
be afraid to cut. Too much 
of a good thing, can still be 
too much. 


HOW TO ADD SOUN 


HTML <audio> 


The HTML <audio> tag allows 
you to embed music on websites 
and apps. Similar to the <video> 
tag, you can specify a source file, 
controls and several other 
options. This allows you to easily 
add audio to your page with 
minimal code. You can then 
target the element via JavaScript 
to give further control. It 
supports MP3, WAV, OGG and 
other formats, with MP3 being 
Universally supported across 
modern browsers and devices. 
A simple example of using the 
<audio> tag: 
<audio autoplay=”autoplay” 
controls=”controls”> 
<source src=”music.ogg” /> 
<source src=”music.mp3” /> 
</audio> 
Some handy attributes specific 
to the element include: 
e Autoplay - to allow the audio 
to play once it is ready 
e Controls = controls for the 
audio file will be included on 
the page 
e Loop - if this one is included, 
the audio will loop and play 
again once it has finished 
e Preload - preload the audio 
when possible so it’s ready 
for playing 
Limitations to the <audio> 
element include: 
¢ Low limit to number of 
sounds played 
simultaneously 
¢« No precise timing control 
¢« No ability to apply real-time 
effects 
e No way to analyse sounds 


AWESOME AUDIO 


Between HTML audio and the Web Audio API, 
it’s easy to start adding sound to your projects 


Web audio Understanding the Audio Routing Graph 


The Web Audio API is a powerful 


system for controlling audio on the 


web. It enables audio sources, 
adds effects, creates audio 
visualisations and more. 

The Web Audio API manages 
operations inside an Audio 
Context. Audio operations are 
performed with audio nodes, 
which are linked together to form 
an Audio Routing Graph. 

Multiple sources are supported 
within a single Audio Context. This 
modular design is highly flexible 
allowing the creation of complex 
audio designs. 


AUDIO ROUTING GRAPH FLOW 


Audio nodes are linked into chains 
and simple webs by their inputs 
and outputs. They typically start 
with one or more sources. 

Node outputs can be linked to 
the inputs of others creating 


chains or webs of audio streams. A 


common effect is to multiply the 


audio by a value to make it louder 
or quieter using the GainNode. 
Once the sound has been 
effected and is ready for output, it 
can be linked to the input of a 
AudioContext.destination, which 
sends the sound to the speakers. 
Note: This last connection is only 
required if you need the audio to 
be heard. 
A typical flow for Web Audio 
could look something like this: 
» Create audio context 
» Create sources inside the 
context, such as <audio>, 
oscillator or streams 
Create effects nodes, such as 
reverb, flanger, panner, or 
compression 
» Choose a destination for the 
audio, such as speakers 
» Connect the sources to the 
effects, and the effects to the 
destination 


» 


vw 


Below illustrates the Audio Context 


and the flow of the Audio Graph. 


Audio Context 


The major file formats explained 


MP3 
A compressed or 
‘lossy’ format. Audio 


data is compressed 
and optimised for size 
and bit rate. This is 
the format you want 
to be using as often 
as possible. 


WAV 
The WAVE container 
format is an 
uncompressed audio 
file. Much larger sizes 
typically. Files in the 
WAVE container format 
typically end with the 
“wav extension. 


FLAC 
Uses lossless 
compression, meaning 
silence does not take up 
file space, but the 
uncompressed audio is 


retained. Larger file size, 


(smaller than wav), and 
not as well supported. 


Ogg Theora Vorbis 
Supported in desktop/ 
mobile Gecko (Firefox), 
Chrome, and Opera. 
Support can be added 
to Safari (but not on 
iOS) with an add-on. The 
format is not supported 
in IE in any way. 
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Where to 
get sounds 


SITES 


Freesound 
https://freesound.org 
Freesound is a collaborative 
database of Creative 
Commons Licensed sounds. 
You can browse, download 
and share sounds. 


SoundJay 
www.soundjay.com 

Library of free sounds you are 
allowed to use on your 
website, free of charge and 
royalty-free in your projects. 


Partners In Rhyme 
www.partnersinrhyme.com 
Free and royalty-free music 
and sound effects. 


ROYALTY-FREE 


Pond5 
https://bit.ly/2J/KstFb 

One of the world’s largest 
collection of royalty-free stock 
video and creative assets, 
sounds and music 


Premium Beat 
www.premiumbeat.com 
High quality curated royalty- 
free music library, organised 
nicely by genres and moods. 


Audio Jungle 
https://audiojungle.net 
Massive library of royalty-free 
sounds and music from $1. 


LICENCED 


Sound Stripe 
https://soundstripe.com 
Membership model, for 
unlimited licenses for songs in 
large, curated music library. 
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Sound 
libraries 


Howler.JS 
https://howlerjs.com 

A solid, audio library for the 
modern web. A solid cross- 
platform solution, for 
managing multiple sound 
effects easily, with good 
documentation to get started 
quickly. Includes a wide range 
of file support, use of audio 
sprites, spatial audio for 3D 
experiences, automatic 
caching and has no 
dependencies. 


Pizzicato.JS 


https:/alemanqgui.github.io/ 
pizzicato 

Another well documented 
Web Audio JavaScript library. 
Pizzicato has a simple set of 
methods for creating cool 
effects, using sound inputs, 
and managing sound files. 
Compressors, stereo panning, 
tremolo, reverb, flanger and 
many more effects are 
included, to start creating cool 
effects out of the gate. 


SoundJS 
https://createjs.com/soundjs 
SoundJS by Grant Skinner. A 
JavaScript library that 
provides a simple API, and 
powerful features to make 
working with audio extremely 
simple. Designed with 
cross-browser support in 
mind, it gracefully falls back to 
HTML audio for wide support. 
Easily ties in audio file loading 
to PreloadJS. If you are 
already using CreateJS tools, 
this is a solid choice. 


HOW TO USE THE WEB AUDIO API 


Discover how to use a powerful modular approach to building sound 


While the audio element allows 
you to include plugin-free audio on 
your site, it is still limited. For 
maximum sound control, the Web 
Audio API allows you to generate 
sounds, play exist ones, create 
effects and much more. In this 
example you'll load and play a 
sound file using the API. 


1. INITIALISE THE 

AUDIO CONTEXT 

To start we need to set up our 
Audio Context, an audio canvas for 
our sounds. This method ensures 
maximum cross-browser support 
and fallback in case the API is not 
supported. 

try { 

window.audioCtx = window. 
AudioContext]|| window. 
webkitAudioContext; 

audioCtx = new AudioContext(); 
} 

catch(e) { 

alert(‘Web Audio API is not 
supported in this browser’); 

} 

A single audio context supports 
multiple sound inputs and 
complex audio graphs, so you only 
need one for each audio 
application we create. 


2. CONNECT THE 

AUDIO GRAPH 

Any audio node’s output can be 
connected to any other audio 
node’s input by using the 
connectQ) function. In this example 
you will connect a source node’s 
output into a gain node, and 
connect the gain node’s output 
into the context’s destination: 

// Create the source. 

var source = context. 
createBufferSource(); 

// Create the gain node. 

var gain = context.createGain(); 
// Connect source to filter, 
filter to destination. 
source.connect(gain); 
gain.connect(context. 
destination); 

This audio graph is now dynamic, 
meaning you can change it 


ture 


whenever you need. You can 
disconnect audio nodes from the 
graph by calling node. 
disconnect(outputNumber). The 
power of this modular approach 
allows you to control gain (volume) 
for all sounds, or ones you wish. 
You can route sounds through 
effects or not at all, or in any 
combination you might need. 


3. LOADING SOUNDS 

To load an audio file into the Web 
Audio API, we can use an 
XMLHttpRequest and process the 
results with context. 
decodeAudioData. This works 
asynchronously and doesn't block 
the main interface thread. Here is 
what the code would look like: 

var request = new 
XMLHttpRequest(); 
request.open(‘GET’, url, true); 
request.responselype = 
‘arraybuffer’; 

request.onload = function() { 
context.decodeAudioData(request. 
response, function(theBuffer) { 
buffer = theBuffer; 

}, onError); 

} 


request.send(); 


4. PLAYING SOUNDS 
Audio buffers are only one 
potential source of audio. You can 
use direct input froma 
microphone or line-in device or an 
<audio> tag among others. Once 
you've loaded your buffer, you 
need to create an 
AudioBufferSourceNode for it, 
connect the source node into your 
audio graph, and then call start(O) 
on the source node. To stop a 
sound, call stop(O) on the source 
node. 
The code looks like this: 
function playSound(buffer) { 
var source = context. 
createBufferSource(); 
source.buffer = buffer; 
source.connect(context. 
destination); 
source.start(Q); 


5. PUTTINGIT ALL TOGETHER 
As you can see from the previous 
code, there’s a bit of setup to get 
sounds playing in the Web Audio 
API. But, with this modular 
approach you gain maximum 
control over audio. Mixing sounds, 
reading their data via the Analyzer 
Node and so much more. Here is 
what a working example to load 
and play a sound looks like all 
together. Consider abstracting 
these steps for managing multiple 
sounds in larger projects as well. 
var audioCtx, analyser, 
bufferLength, dataArray; 
window. addEventListener(‘load’, 
initAudio, false); 

function initAudio() { 

try { 

window.audioCtx = window. 
AudioContext]|| window. 
webkitAudioContext; 

audioCtx = new AudioContext(); 
analyser = audioCtx. 
createAnalyser(); 

} 

catch(e) { 

alert(‘Web Audio API is not 
supported in this browser’); 

} 

// load the audio file 

source = audioCtx. 
createBufferSource(); 

var request = new 
XMLHttpRequest(); 
request.open(‘GET’, 
beat3.mp3’, true); 
request.responselype = 
‘arraybuffer’; 

request.onload = function() { 
var audioData = request. 
response; 

audioCtx. 
decodeAudioData(audioData, 
function(buffer) { 
source.buffer = buffer; 
source.connect(analyser); 
analyser.connect(audioCtx. 
destination); 

source.loop = true; 
source.start(Q); 
},function(e){“Error with 
decoding audio data” + e.err}); 
} 

request.send(); } 


‘assets/ 


AUDIO IN ACTION 


2:25 PM 


@ paperplanes.world 


Paper Planes 
https://paperplanes.world 

Catch and throw Paper Planes with people 
around the world, using the power of the 
web sockets and connections. 


THE WAR OF 1996 


1997 
97.04.1996 


07 03.19% 


The War of 1996 


www.warofl996.com 

An incredible use of the custom sound FX 
as President Whitmore’s powerful speech 
combines with music from Independence 
Day for a unique audio experience. 


AWESOME AUDIO 


There are so many amazing examples to choose from, 


but here are just a few to inspire you! 


NY 
WIZARDING 
WORLD. 


Relemore 


You have previously discovered 


your Patronus, which is an 


Occamy 


Discover your Patronus 
https://my.pottermore.com/patronus 

This experience transports users into a Harry 
Potter-inspired 3D environment, rich with sound and 
beautiful FX, eventually discovering their Patronus. 


Nir: 
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Get more 
info on Web 
Audio API 


MDN Web Docs - 

Web Audio API 
https:/mzl.la/lioqg44h 

An in-depth look into the API 
with rich documentation and 
examples. Every aspect of the 
API is well covered. 


W83C - Web Audio 
https://bit.ly/2HM83z9 

A repository containing the 
latest editor’s drafts of the 
W3C Web Audio API. This is 
the source where the 
standards are presented. 


Introduction to 

Web Audio API 
https://bit.ly/2ZilgRgR 

A good introduction to 

using the API to create 

sounds by Greg Hovanesyan. 
Create a music-specific 
application using the oscillator 
audio source. 


Web Audio Weekly 
www.webaudioweekly.com 
A collection of news, stories 
and demos all about the 

Web Audio API. Covers a wide 
range of topics and examples 
to keep you learning. 
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BUILD PROGRESSIVE WEB APPS WITH WORKBOX 


Getting apps to work offline 


One of the biggest barriers to providing a true 
native-like experience from a web app is 
dependency on the network. It’s no good for 
the user if the app only works with an internet 
connection. Native apps can be loaded up even 
when the device is completely offline, and don't 
fail during periods of intermittent connection 
(think about when you’re on the train...). 
Fortunately, the Service Worker API solves this. 
A service worker is a piece of JavaScript 
code downloaded with a page that is stored 
by the browser and runs in the background 
- even when the page isn't being viewed. It 
allows you to intercept network requests (such 
as fetching a URL) and determine how to 


handle them. When combined with the Cache 
API, this enables you to decide when and how 
to serve up cached content if a network 
connection is not available. As a result, it is 
now possible to develop web apps which, 
once downloaded and cached, can be used 
entirely offline. 

Because you define the behaviour for each 
and every request, you can also begin to 
implement more complex caching strategies. 
For example, you might decide to serve from 
the cache immediately but also refresh the 
cache from the network in the background, so 
that next time the same page is requested, the 
data is more up to date. 


ars is that they allow you 
ffline and with intermittent 
rving up content from a browser 


o load. Loading content 

ous, and because you can 
service workers allow you 
isking showing stale data. 


service workers let you 
native apps but couldn't 


. Push notifications and background 


ichronisation are two examples of this. 


Workbox 


Workbox 


HOME GUIDES MODULES REFERENCE DOCS 


avaScript Librarie 


TE Workbox 


s for adding offline support to web apps 


GET STARTED 


Introducing Workbox 


By now, service workers probably sound great. 
But with the level of control and flexibility they 
introduce, also comes a great deal of 
complexity. Caching is a notoriously hard 
problem to solve, and if you start writing 
‘vanilla’ service workers (which we've covered 
in the past), you'll quickly find that you end up 
with pages and pages of code handling 


different scenarios of network request. 
Workbox is a library from Google which 
simplifies the code you need to write to 
implement caching strategies. Where you 
might previously have required dozens of lines 
of code, Workbox can handle in a single line. It 
also provides easier ways to handle 
background sync, and improved debugging. 
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Debugging 


The behaviour of service workers can be 
confusing to start with because they keep 
running in the background, so refreshing 
the page might not always do what you 
expect. As a result, as you start out wed 
suggest including frequent console logging 
in your code to help follow what’s 

pening. Additionally, Chrome Developer 


an provide detailed insight into the 
e workers on a page. In Developer 
navigate to the Application tab and 


Elements Console Sources Network Performance Memory Application Security » 


Service Workers 


& Manifest Offline “ Update on reload Bypass for network 


@ Clear storage 


locaihost Update Unregist! 


Storage ree swis 
> =5 Local Storage 

= Received 29/04/2018, 20:28:52 
>» 55 Session Storage 


> & IndexedDB 


= tatus @ #1685 activated and is running stop 


S Web SQL 
ts http://localhost:8000/ focus 


Cache t Test push message from 
= Te . 

>» = Cache Storage misckbodes 
5 Application Cache test-tag-from-devtools 


Frames 


> Ctop 


> Service workers from other domains 
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Push 


Sync 


a 


~< 


Create your first service worker 


_» 


Workbox makes it easier than you think 


1.Set up an HTTP server 

We'll begin by installing and running an HTTP 
server for our site. The easiest way to do this is 
using npm, with which we can run: 

npm install -g http-server 

We can then create a new project director 

and run: 

http-server -p 8000 -c-1 

The -c-1 parameter disables HTTP caching to 


if (‘serviceWorker’ in navigator) { 

window. addEventListener(‘load’, 
function(d) { 

navigator.serviceWorker. register(‘/sw.js’). 
then(registration => { 

console.log(“Successfully registered 
service worker.”); 

}, function(error) { 

console.log(“Error registering service 


make it easier to see our service worker in all worker: “ + error); 
its glory. ye 
i; 
2. Create a basic site } 
To test our service worker, we'll On 
° e rn a remote 
create a simple static website. If Serve 


we use Bootstrap (loaded from 
a CDN), we can throw together 


4. Creating the service 
worker script 


something reasonable-looking Worke The service worker script itself 
fairly swiftly. Let’s assume that reasons. Beaty is where the power of Workbox 
we embed all of our content in about th Wworr starts to come into play. Let’s 
at for y 
index. for noe and include Server. ot Su local create swjs. The first thing we 

a script on the site called site.js. in ming ep it need to do is use the service 


Our HTTP server will automatically 
serve index.html when we run it, 
which we can access in the browser at: 
http://localhost:800Q/ 


3. Registering a service worker 

To get started with Workbox, we need to 
register a service worker. This tells the browser 
to install a specific JavaScript file when the 
page is loaded. Let’s call our service worker file 
sw.js. In this case, we need to add some code to 
site.js to register it: 


worker API’s importScripts function 

to import Workbox, which we can do 
from a CDN: 
importScripts(https://storage.googleapis. 
com/workbox-cdn/releases/3.1.0/workbox-sw. 
18); 
It’s worth noting that this is the ‘manual’ way to 
create a service worker script. There is also a 
Workbox CLI which you can use to generate a 
service worker automatically from 
configuration, and can be integrated into your 
build pipeline. 


5. Did it load correctly? 
We can test to see if Workbox has been 
imported correctly: 
if (workbox) { 

console.log(“Workbox loaded 
successfully.”); 
} else { 

console.log(“Workbox could not be 
loaded.”); 
} 
importScripts is synchronous so we don't need 
to worry about promises for this to work. 


6. Configuring your first 
caching behaviour 
Now that Workbox is loading with your page, 
let’s use it to control our content caching. Let’s 
say we want to default to loading our 
JavaScript and CSS content from the cache, 
and hit the network only if a resource 
couldn't be found. We can do 
this with a straightforward 
routing function. 
workbox.routing.registerRoute( 
new RegExp(‘.*\.(?:js|css)’), 
workbox.strategies. 
cacheFirst() 
By 
Here were using a regular 
expression to match the request types 
we want to handle, and using Workbox’s 
built-in cacheFirst function to specify our 
desired behaviour. 


7. Comparing to ‘vanilla’ 
service workers 
At this point, it’s useful to contrast this code 
with the approach we'd need to take to do the 
same thing if we weren't using Workbox. We’d 
have to manually populate the cache (which we 
won't go into here), then respond to HTTP fetch 
events by checking the cache to see whether a 
matching resource is available, serving it up if it 
is, or falling back to the server if it isn’t. Sound 
complicated? The fetch handling on its own 
looks like this: 
self.addEventListener(‘fetch’, event => { 
event.respondWith( 
caches.match(event.request).then(response 
= 4 
if (response) { 
console.log(“Retrieving resource from 


cache: “ + event.request.url); 
return response; 
} 
console.log(“Retrieving resource from 
server: “ + event.request.url); 
return fetch(event.request); 
} 
) 
,; 
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were deleted from IndexedDB. 
> (ENCED Precaching is responding to: / 


p/4.1.0/css/bootstrap.min.css 
CECE) Router is responding to: 
| workbox | Router is responding to: 


n.js 


Vv 


/site.js 


v 


> (ERIC) Router is responding to: 
r.js/1.14.0/umd/popper.min.js 

> | workbox | Router is responding to: 
p/4.1.0/js/bootstrap.min.js 


otstrap/4.1.0/css/bootstrap.min.css' 


slim.min.js' 


Seiya) USing CacheFirst to respond to 


ar. jS/1.14.0/umd/popper.min.js' 


0/js/bootstrap.min.js' 
registered service worker. 


otstrap.min.css 


Le 4] Elements Console Sources Network Performance Memory§ Application Security » > xX 
>] & © top vs Filter Default levels ¥ Group similar 1 hidden | 2 
Workbox loaded successfully. Sw.js:4 
> | workbox | Welcome to Workbox! workbox-core.dev.js:433 
> During precaching cleanup, 1 cached request was deleted and @ entries workbox-core.dev.js:433 


> (EECCESD Router is responding to: https://stackpath.bootstrapcdn.com/bootstra 


https: //code. jquery.com/jquery-3.3.1.slim.mi Wworkbox-core.dev.js:433 
https: //cdnjs.cloudflare.com/ajax/libs/poppe Workbox-core.dev.js:433 
https: //stackpath. bootstrapcdn.com/bootstra 
> | workbox | Using CacheFirst to respond to 'https://stackpath.bootstrapcdn.com/bo workbox-core.dev.js:433 


> | workbox | Using CacheFirst to respond to '/site.js' 
> | workbox | Using CacheFirst to respond to 'https://code. jquery.com/jquery-3.3.1. 


‘https://cdnjs.cloudflare.com/ajax/lib workbox-core.dev.js:433 


sing CacheFirst to respond to 'https://stackpath.bootstrapcdn.com/bo workbox-core.dev.js:433 


er is responding to: https://stackpath.bootstrapcdn.com/bootstra 


workbox-core.dev.js:433 


workbox-core.dev.js:433 


workbox-core.dev.js:433 


workbox-core.dev.js:433 


workbox-core.dev.js:433 


workbox-core.dev.js:433 


Site.js:4 
workbox-core. dev. js:433 


8. Testing it out 
Fire up Chrome and take a 
look at the Console. You should 
see a few things happening. The 
first time you load your page, 
Workbox will cache all JavaScript and CSS 
assets requested, including those you're 
loading from CDN. When you refresh, you'll see 
it responding to these requests with our 
cacheFirst behaviour. 


9. Precaching for offline viewing 
Okay, so we're retrieving some assets from our 
cache, but thus far we’ve only handled static 
resource caching for our CSS and JavaScript. 
But really, we want our page to work in full 
when we're offline. To achieve this, we want to 
use precaching, which downloads files before 
the service worker is installed. This is again 
very straightforward with Workbox: 
workbox.precaching.precacheAndRoute(L 
‘/index.html’ 
1; 
If you now load the page, then terminate the 
webserver and refresh it again, you'll find that 
it still loads correctly offline. 


10. Alternative caching behaviour 

So far we've only looked at precaching and 
defaulting to the cache. Workbox comes with 

a number of other built-in caching 

behaviours which you can use with workbox. 
strategies. They'll handle most situations you're 
likely to encounter: 

cacheFirst() - we've looked at already 
networkFirst() - the opposite of cacheFirst, 
this tries the network first then the cache 


staleWhileRevalidate() - one of the most 
popular caching patterns, this responds quickly 
with a cached response, then uses a network 
request to update the cache 

networkOnly() - ensures you always serve 
content fresh by only allowing it from the 
network 

cacheOnly() - will serve content only from the 
cache; youre probably not going to use this 
much at all. 


11. Google Analytics 

Another very cool feature of Workbox is that it 
allows you to take advantage of Google 
Analytics while the user doesn’t have a network 
connection. By default, if you're using Google 
Analytics to collect data about how your users 
interact with the app, you'll miss out completely 
on activities while the user is offline. Workbox 
allows you to queue failed Google Analytics 
requests so they can be retried when the user 
is back online. This can be done with a single 
line of code: 
workbox.googleAnalytics.initialize(); 


12. Other caching strategies 

We've covered the most common ways to 
handle caching, but there are many other 
scenarios you might want to cover which 
Workbox will handle. Google’s Workbox pages 
include some excellent ‘recipes’ for commonly 
used caching strategies which you can take a 
look at. For example, if you want to cache 
Google Fonts, it has a pre-baked function to do 
this. Make sure you check out the link: 
https://developers.google.com/web/tools/ 
workbox/guides/common-recipes 
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Do I need Workbox? 


If youre still asking “would | be better off 
building my service workers without 
Workbox?”, then there are a few things to think 
about. Workbox is fairly lightweight and won't 
make a dent on your page's performance, and 
is as widely supported as the service worker 
API itself. Therefore, we’d argue that there’s 
currently not a whole lot of reason not to use 
Workbox if you’re considering introducing 
service workers to your app. In fact, there’s not 
much reason not to use it full stop - even if 
some of your users won't be able to take 
advantage of the service worker, it'll degrade 
gracefully and benefit those who can. The 
alternative, to manually code all your caching 
behaviour, really seems like re-inventing the 
wheel and will drain time you could be 
spending on other things. For serious 
production apps, it’s also worth getting familiar 
with the Workbox CLI. This can be integrated 
into your build process, and as well as 
generating the service worker itself from the 
configuration you provide, it can also do things 
like automatically generate a manifest of files 
to cache, which saves you manually updating a 
list as you develop your app. 


What’s new in 
Workbox 3? 


The stable release of Workbox 3.0 came in 
March (we’re now on 3.1), and as you’d expect 
from a major release, brought both numerous 
changes and new features. 

The CDN which we used earlier is introduced 
with Workbox 3.0, making it easier to get up 
and running with Workbox and reducing the 
resource consumption from your own hosting. 

Debug logging is also greatly improved, with 
logging enabled by default when Workbox is 
used from localhost as you probably will when 
you start developing with it. 

Alongside this, the payload of Workbox has 
been optimised, and it’s now set up to avoid 
downloading features which you're not using. 

As aresult, there are a number of breaking 
changes compared to version 2. Chances are, 
this probably won't be a huge issue since 
Workbox is relatively new and youre probably 
not using it in production. Nonetheless, Google 
provide a comprehensive guide on migrating 
from v2 to v3 on their developer pages. 
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n this tutorial we are going to show you how 
you can use the power of RxJS to manage 
your application’s state with Redux. 

In particular welll look at how you can 
lazy-load portions of your store and handle asynchronous 
actions with epics. To demonstrate this we'll create an app 
which hooks up with Wikipedia’s API. You'll need a 
working knowledge of Redux and its concepts. 

There is a repo to accompany this tutorial which 
contains the step-by-step code: https://github.com/ 
danielcrisp/reactive-state-management. 


1. Create the app 
We're going to use Angular’s excellent CLI to help us 
quickly build out an app. Use the following commands to 
install it, create an app and start a dev server. 

npm install -g @angular/cli 

ng new demo --routing 

cd demo 

ng serve --open 
Next we need to install Redux and ‘redux-observable’, 
which is RxJS-based middleware for Redux. Note that 
at the time of writing ‘redux-observable’ doesnt have 
Support for Redux v4 so you need ensure you only 
install v3 of Redux: 
npm install --save redux@*3 redux- 

observable 
‘redux-observable was created by the team at Netflix. 
There is a great video about it here: 
youtube.com/watch?v=AsiIncyG8whg 
And finally we need @angular-redux’, which bridges the 
gap between Angular and Redux. Install it like this to get 
the Angular 5+ compatible version: 
— npm install --save @angular-redux/store@*7 


2. Wiring it up 
The next step is to wire everything up with Angular. 
Create a folder inside ‘src/app’ called ‘@store’ | like to 
use ‘@ to denote core modules that aren't lazy-loaded 
because they are listed at the top in the directory. Inside 
the folder add two files 
store.module.ts 
import { NgModule } from ‘@angular/core’ ; 
import { DevToolsExtension, NgRedux, 
NgReduxModule } from ‘@angular-redux/store’ ; 
import rootReducer from ‘./store.reducers’ ; 
@NgModule({ 
imports: [ 
NgReduxModule 
a 
providers: [] 
i) 
export class StoreModule { 
constructor (ngRedux: NgRedux<any>, 
devTools: DevToolsExtension) { 
const middleware = []; 
const enhancers = []; 
if (devTools.isEnabled()) { 
enhancers.push(devTools. enhancer ()); 
} 
ngRedux.configureStore( 
rootReducer(), {}, 


middleware, 
enhancers 
ye 
a 
store.reducers.ts 
import { combineReducers } from ‘redux’ ; 
const defaultState = { 
hello: ‘world’ }; 
export default function rootReducer 
(injectedReducers: any = {}) { 
return combineReducers({ 
// Core reducers 
example: (state: any = defaultState) => { 
return { 
...State 
ie 
}; 
// Lazy-loaded reducers 
..injectedReducers 


5 
7 


Note you might need to stop and start the webpack 
server after creating new files. Also to keep things 
succinct I’m going to use the <any> type regularly. 

Now open up ‘app.modulets and import both 
NgReduxModule and your newly created StoreModule: 
import { NgReduxModule } from ‘@angular- 

redux/store’ ; 
import { StoreModule } from ‘./@store/store. 
module’ ; 
Add both modules to the imports array in the NgModule 
config and save to reload the app. 
Check your store in DevIools and you should see 
the defaultState. 


3. Creating a lazy-loaded module 


In order to demonstrate how to lazy-load portions of the 


store well need to create a lazy-loaded route and module. 


The working directory is ‘src/app’. 

ng g module search --routing 

cd search 

mkdir components 

cd components 

ng g component index 
This creates a module, with a routing file, and a 
component to use as the index route. We're going to use 
this index route to conduct a search of Wikipedia. 


@e2INIT 


@ Pause 
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4. Set up the internal module 
routing config 
Now we need to add the routing config for inside our 
module. Open up the ‘search-routing.module ts file that 
we created with the CLI. You'll see an empty routes array. 
Import the IndexComponent and add it to the route 
config, like so: 

import { IndexComponent } from ‘./ 

components/index/index.component’ ; 

const routes: Routes = [{ 


path: ‘’, 
component: IndexComponent 
Galle 
5. Add another route 


Let's alSo create a non-lazy-loaded module and 
component (again starting from ‘src/app’)) to provide an 
alternative route. 

Since this is not lazy-loaded it is a good place to store 
components that are required throughout the app, so 
well call it ‘shared: 

ng g module shared 

cd shared 

mkdir components 

cd components 

ng g component root 
Note: | didn't use the @’ when using the CLI command 
because it'll try to use it in the output. Instead | just 
rename the folder manually. We also didn't use the 
‘-routing flag, because we'll handle routing in the root 
app routing module. Import this module into ‘app.module. 
ts and add it to the imports array. 


6. Add the routing outlet 


The next step is to update the ‘app.component.html’ to 
declare where the routes should be rendered, and add a 
simple nav so we can switch between routes. Simply 
replace all the contents with this: 
<div class=”container”> 
<h1>My App</h1> 
<a routerLink=”/”>Home</a> | <a 
routerLink=”/search”>Search</a> 
<hr> 
<router-outlet></router-outlet> 
</div> 
Note: It’s not necessary, but you can add Bootstrap’s CSS 
if you want it to look a bit tidier. 
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7. Set up the main app routing 
Out of the box your app won't have any routing, it'll just 
load the AppComponent, but because we used the 
--routing flag we do have a routing module. Open up 
‘app-routing.module.ts’ and we'll add the root route first 
import { RootComponent } from ‘./@shared/ 
components/root/root. component’ ; 
const routes: Routes = [{ 
path: ‘’, 
component: RootComponent 
dal 
Check the app in the browser and hopefully you will see 
a root works’ message in the page. Now let's add the 
search module with lazy-loading: 
const routes: Routes = [{ 


path: ‘’, 

component: RootComponent 
Vex 1 

path: ‘search’, 

loadChildren: ‘./search/search. 
module#SearchModule’ 
Hal 


This tells Angular which module to load when the user 
hits the ‘search’ path. Try it in the app (| needed to restart 
the server at this point) and open the Network panel of 
DevlTools — you'll see the ‘search.module.chunk.js loaded 
when you click the link in the nav and an ‘index works’ 
message in the page. Pretty cool! 


8. Using some RxJS magic 
Before we can modify our store structure we need to add 
a mechanism for lazy-loaded modules to add their own 
Reducers and Epics to the main store. 
Return to the @store’ directory and create a service 
with the CLI: 
| ng g service store --flat true --spec false 
Add two BehaviorSubjects to the service, one called 
‘epics$’ and one called ‘reducers$’. These will allow other 
modules to interact with the main store. 
import { Injectable } from ‘@angular/core’ ; 
import { BehaviorSubject } from ‘rxjs/ 
BehaviorSubject’ ; 
@Injectable() 
export class StoreService { 
epics$: BehaviorSubject<any>; 
reducers$: BehaviorSubject<any>; 
constructor () { 
this.epics$ = new BehaviorSubject(nul1) ; 
this.reducers$ = new 
BehaviorSubject (null) ; } } 


Import the newly created service into the ‘store. modules’ 


and add it to the providers array. 


9. Integrate with main store 


Next we need to hook up this up to the store itself. In 


Redux DevIools 


Installing this extension will enable you to inspect 


your store in DevTools. You can get it from here: 
extension.remotedev.io 
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‘store. module.ts, inject the StoreService in the constructor. 
We're also going to need some extra imports: 
import { ActionsObservable, 
createEpicMiddleware } from ‘redux- 
observable’ ; 
import { filter, mergeMap } from ‘rxjs/ 
operators’ ; 
Now create a rootEpic and add it to the middleware array. 
This monitors the ‘epics$’ subject we created, ignores 
falsey values and merges each Epic into the chain. 
const rootEpic = (action$: 
ActionsObservable<any>, store: NgRedux<any>) 
ae 
return storeService.epics$.pipe( 
filter(epic => !!epic), 
mergeMap(epic => { 
return epic(action$, store); 
Be, 
); 
ie: 
const middleware = [createEpicMiddleware 
(rootEpic) J; 
We also need to do something similar for the Reducers. 
Do this after the ‘configureStore’ block: 
const injectedReducers = {}; 
storeService.reducers$. pipe( 
filter(reducer => !!reducer) 
).subscribe((reducer) => { 
injectedReducers[reducer.name] = reducer. 
reducer; 
ngRedux. replaceReducer (rootReducer 
(injectedReducers) ); }); 


10. Create the search actions 
Let's see if our mechanism works by creating our search 
store. We're going to need Actions, Reducers and an Epic. 
This is when Redux starts to feel verbose! 
To do this, first create ‘search.actionsts in a ‘search/ 
Store’ directory: 
import { Injectable } from ‘@angular/core’ ; 
import { dispatch } from ‘@angular-redux/ 
store’ ; 
@Injectable() 
export class SearchActionsService { 
static readonly FETCH_PAGES = ‘FETCH_ 
PAGES’ ; 
static readonly PAGES_LOADING 
LOADING’ ; 
static readonly PAGES_SUCCESS = ‘PAGES_ 
SUCCESS’ 3 
static readonly PAGES_ERROR = ‘PAGES_ 
ERROR’ ; 
@dispatch() 
fetchPages = (payload: { 


“PAGES_ 


q: string 
Jt) =e A 
type: SearchActionsService.FETCH_PAGES, 
pay load 
3 
This defines the four Actions and the structure of the 
payload required by the ‘fetchPages’ action - the only 
one exposed for other components in the app to call. 


11. Search reducers 
Next up, the Reducers, which will modify the store for 
each Action. Create ‘search.reducers.ts: 
import { SearchActionsService } from ‘./ 
search. actions’ ; 
const INITIAL_STATE = { 
q: null, 
pages: [], 
_loading: false, 
_error: false }; 
export default function searchReducer (state 
= INITIAL_STATE, action: any) { 
switch (action.type) { 
case SearchActionsService.FETCH_PAGES: { 
return { 
...INITIAL_STATE, // start with clean 
state 
q: action.payload.q 
Ir 
case SearchActionsService.PAGES_LOADING: { 
return { 
...State, // copy the previous state 
pages: [], 
_loading: true 
yy 
case SearchActionsService.PAGES_SUCCESS: { 
const { response } = action.payload; 
const titles = response[1]; 
const descriptions = responseL2]; 
const urls = responseL3]; 
return { 
...State, // copy the previous state 
pages: titles.map((title, index) => { 
return { 
title, 
description: descriptionsLindex], 
url: urls[Lindex] 


ME 

D> 

_loading: false 

ae 

case SearchActionsService.PAGES_ERROR: { 
return { 


...INITIAL_STATE, // reset state 
_error: true 
a ae 


return state; } 


12. Search epics 
The Epic is the piece of the puzzle that handles side- 
effects. It can listen for particular Actions and return 
another stream of Actions. 

This is particularly useful for async things, such as 
making an Ajax request, which start with an Action @.g. 
FETCH PAGES) and at some point in the future will 
receive the data and dispatch another Action @.g. 
PAGES SUCCESS). 

Let's create a simple Epic that listens for the FETCH_ 
PAGES Action, has access to the Action’s payload, but 
doesnt do anything yet. Do this in ‘search.epics.ts: 

import { Injectable } from ‘@angular/core’ ; 
import { NgRedux } from ‘@angular-redux/ 
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Motivation 


Was this page helpful? 


Do we really need Redux? 


It’s worth noting that there has been 
a lot of hype around Redux, however 
it is definitely not a necessity — even 
in large applications. Sure, it can be 
very helpful, but it does come with 
some significant overhead. Firstly, it 
has quite a steep learning curve, so 
consider if that is suitable for your 
team and your project. Secondly 

it can be very verbose — it can feel 
like you have to write quite a bit of 
code to do even the simplest thing. 
And, finally, you can easily introduce 
hard-to-spot bugs which have been 
caused by impure reducers. 

The most important thing is to 
carefully consider the management 
of your state, especially with 
single-page applications. You can 
absolutely do this without Redux, but 
it does offer great tooling, plenty of 
tutorials and a standardised way of 
doing things. Your call. 


store’ ; 
import { ActionsObservable } from ‘redux- 
observable’ ; 
import { switchMap } from ‘rxjs/operators’ ; 
import { empty } from ‘rxjs/observable/ 
empty’ ; 
import { SearchActionsService } from ‘./ 
search. actions’ ; 
@Injectable() 
export class SearchEpicsService { 
onFetchPages = (action$: 

ActionsObservable<any>, store: NgRedux<any>) 
a> f 

return action$. 
ofType(SearchActionsService.FETCH_PAGES) . 
pipe ( 

switchMap(({ 

payload 

tp eae 

console. log(payload) ; 

return empty(); // Return an empty 
stream. We’1l replace this later 


}) 
a 


13. Hook up to main store 
The last step is to inject the search module’s Reducers 
and Epics into the main store when the module is 
activated. For this let’s create ‘search-store.modulets’ 
alongside ‘search-routing.modulets: 
import { NgModule } from ‘@angular/core’ ; 
import { CommonModule } from ‘@angular/ 
common’ ; 
import { combineEpics } from ‘redux- 
observable’ ; 
import { StoreService } from ‘../@store/ 
store.service’ ; 
import { SearchActionsService } from ‘./ 
store/search. actions’ ; 
import { SearchEpicsService } from ‘./store/ 
search.epics’ ; 
import s 
@NgModule({ 
imports: [LCommonModule], 
providers: [ 
SearchActionsService, 
SearchEpicsService 


| }) 


export class SearchStoreModule { 
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constructor (storeService: StoreService, 
searchEpics: SearchEpicsService) { 
storeService.reducers$.next({ 
‘search’, // this will be the 
object name 


name : 


reducer: searchReducer ¥)3 
storeService.epics$.next(combineEpics( 
searchEpics.onFetchPages, 
// ... add each epic here 
JD}. 3 
ue 
Finally we need to import this module into ‘search. 
module.ts’ and add it to the imports array. 

Now to check that it is working OK open up the Redux 
pane in Devlools and refresh the home page. Click on 
State and you should see the original ‘example: { hello: 
“world” } state. 

Now (using the nav) go to the Search route. Check the 
state again in DevTools and you should now see the 
‘search object. Ta-dah! This is your Search module's store. 


14. Import some modules 
We need to import the FormModule into ‘search.module. 
ts. While were here, let’s also import the HttpClientWModule 
SO we Can make a request to the API. In a real app we'd 
probably import these in the root ‘app.module.ts’ so they 
can be used throughout. 
import { FormsModule } from ‘@angular/ 
forms’ ; 
import { HttpClientModule } from ‘@angular/ 
common/http’ ; 


15. Add a form 


We want to be able to fetch some data from Wikipedia, so 
let’s add a simple form. Crack open the search ‘index. 
component.html’ file and update the contents to this: 
<form (ngSubmit)=”onSubmit ()” 
#searchForm="ngForm’> 
<input type=”search” name=”query” 
L(ngModel) J=”query” required> 
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<button type=”submit” 
[disabled]=”! searchForm. form. valid’>Search</ 
button> </form> 


16. Add the results list 


Time to add some simple HTML for displaying our search 
results. Add this directly below the form: 
<hr> 
<div «ngIf="q$ | async”> 
<div class=”"alert alert-info” 
*«ngI f=" loading$ | async; else 
resultsBlock”>Loading. ..</div> 
<ng-template #resultsBlock> 
<hl>Results for {{ q$ | async }}</h1> 
<div «xngIf=”(pages$ | async).length; else 
noResultsBlock”> 
<div *ngFor="let page of pages$ | async’’> 
<h3><a Lattr.href]=”’page.url”’>{{ page. 
title }}</a></h3> 
{{ page.description }} 
<hr> 
</div> 
</div> 
<ng-template #noResultsBlock> 
<em>No results</em> 
</ng-template> 
</ng-template> 
</div> 
<div class=”alert alert-danger” 
*«ngIf="error$ | async”>An error has 
occurred</div> 
We're using the AsyncPipe so that Angular manages 
our subscriptions for us 


17. Connect to the store 
Now for the fun stuff (finally). We need to hook up our 
IndexComponent with the store so that it can add the 
search query and receive the results. Thanks to RxJS this 
is very simple. This is what you'll need: 
import { Component } from ‘@angular/core’ ; 
import { Observable } from ‘rxjs/ 
Observable’ ; 
import { select } from ‘@angular-redux/ 
store’ ; 
import { SearchActionsService } from ‘../../ 
store/search. actions’ ; 
@Component ({ 
selector: ‘app-index’, 
templateUrl: ‘./index.component.html’ , 
styleUrls: L‘./index.component.css’ ] 
}) 
export class IndexComponent { 
// Selects properties from the store and 
creates Observables 
@select([‘search’, ‘q’]) a$: 
Observable<string>; 
@select(L‘search’ , 
Observable<anyL[ ]>; 


@select(L‘search’ , 


‘pages’ ]) pages$: 


‘_loading’]) loading$: 
Observable<boolean>; 
@select([‘search’, ‘_error’]) error$: 


Observable<boolean>; 
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// The value of the input 
query: string; 
constructor (private searchActions: 
SearchActionsService) { } 
onSubmit () { 
// Dispatches a FETCH_PAGES action with 
the value of the input 
this. searchActions. fetchPages ({ 
q: this.query 
iy 
+ } 


The ‘@select’ lines select a property from the store 
and create an Observable, meaning you can bind directly 
to this in your template using the AsyncPipe. Changes to 
the value in the store will automatically be reflected in 
your Ul. When the form is submitted we dispatch an 
Action to the store, containing the value of the input in the 
search field. This is processed by our Reducer and added 
to the store. Our Epic is also listening so you should see 
the payload logged to the console. 


18. Update the Epic 


We need to update our Epic so that it loads the data and 
adds it to the store. In order to do this it will dispatch 
Actions, as we did with the form above. First off we need 
to import some more things into ‘search.epicsts’ 
import { HttpClient, HttpParams, 
HttpErrorResponse } from ‘@angular/common/ 
http’ ; 
import { catchError, concat, switchMap, 
takeUntil } from ‘rxjs/operators’ ; 
import { of } from ‘rxjs/observable/of’ ; 
Inject HttoClient in the constructor as ‘http’ so we can use 
it in our Epic. Also on the first line inside ‘onFetchPages’ 
— before the return — add this line: 
const cancel$ = action$. 
| ofType(SearchActionsService.FETCH_PAGES) ; 


19. Setting up the request flow 
Let's replace the ‘console.log and ‘empty Observable 
with our real request. First, we define the url and then 
set up the necessary query params: 

const url = ‘https://en.wikipedia.org/w/api. 

php’ ; 

// Set up the query params we need 

const params = new HttpParams({ 

fromObject: { 
// Required by Wikipedia 


action: ‘opensearch’ , 
format: ‘json’, 
formatversion: ‘2’, 
namespace: ‘Q’, 
limit: ‘10’, 

origin: ‘x’, 


// Our search term 
search: payload.q } 
bom 
Now we use Angular’s HttoClient, which wraps the 
request in an Observable, and emit either PAGES _ 
SUCCESS (with the response as the payload) or PAGES _ 
ERROR, depending on the result of the request: 
// Makes the request and switches to 


success / error Action 

const request$ = this.http.get (url, { 
params 

}) pipe ( 
// Handles success 
switchMap((response: any) => { 
// Emit PAGES_SUCCESS with the response 
return of ({ 
type: SearchActionsService.PAGES_SUCCESS, 
payload: { 
response } 
3 

Ds 

// Handles failure 

catchError((response: HttpErrorResponse) => 

t 
// Emit PAGES_ERROR 
// In reality we would inspect the actual 

error response and even 
// retry the request automatically 
return of ({ 
type: SearchActionsService.PAGES_ERROR 
a); 
3 


// Cancels any inflight request if a new 
search is made 
takeUntil (cancel$) 
DE 
return request$; 
Note the tiny ‘takeUntil line. This will cancel any inflight 
requests if another FETCH PAGES Action is dispatched, 
i.e. the user has made a new search. 


20. Wrapping up 
At this point the search will work, but it doesn't display the 
loading message. So we need to dispatch the PAGES _ 
LOADING Action first and then run the request. We can 
do that by concatenating the two Actions like this (replace 
the existing return request$ line): 

const loading$ = of ({ 

type: SearchActionsService.PAGES_LOADING 
ba): 


// Emit PAGES_LOADING first, then run 

request 

return loading$.pipe( 

concat (request$) 

ys 
Give it a go in the browser. Try searching and you should 
see your results listed in the page and see the store 
updating in DevTools. 


21.In conclusion 

The real power comes when managing complexity. 
Defining the stream of Actions — and data — in the Epics 
helps reason about the flow and makes it inherently 
reusable across components. 

Processing and shaping the data in the Reducers also 
feels very neat and means you only store what you really 
need, in a format that suits your use-case. And, as you 
Saw, this keeps the components very clean meaning they 
can focus on the UL. 
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oth object-oriented and traditional 
programming languages provided 
developers with some way of ‘access 
control’ - by breaking down libraries and 
other elements into modules of their own, outside 
meddling with internal data structures can be avoided. 
Furthermore, the act of declaring an interface between a 


program and its environment is beneficial for all parties 
involved. In addition to the clear separation of concerns, 
developers tend to improve code quality and concept 
coherency while working out the details of a module 
access API. 

JavaScript did not provide a modularisation API of its 
own. This has led to the appearance of various 
modularisation systems like CommonJS, which will be 
discussed tangentially in this article. Some developers 
also resorted to server-side or workstation-based 
transpilation, where groups of files were bundled together 
before delivery. 

While all of these workarounds are fine and well - when 
used properly, JavaScript, today, is a first-class language 
and getting a native way to handle modularisation is 
much more convenient. ECMAScript 2015 - the standard 
is also Known as ES6 - provides exactly that with its 
modularisation API. 


1. Getting started 


Getting started with ECMAScript requires the presence of 
a worker file. Enlist the structure shown accompanying 
this step to get started - it contains a ‘work area’ and loads 
a module. 
<html> 
<body> 
<script type=”module” src=”./mainmodule. 
js”></script> 
<script>puber () ; 
</script> 
</body> 
</html> 


MAIN 
NAMESPACE 


2. Alternative load 
Using a dedicated <script> tag for loading the modules is 
not to everyone's taste. The module import syntax 
normally intended for inter-module imports can, however, 
also be applied to script tags hosted inside of webpages. 
<script type=”module”> 
import { puber } from ‘./tree.js’; 
ae 
</script> 


3. First test 


Given that our test harness requires the presence of a 
function called ‘lives_in module, we can - in theory - 
simply declare it in ‘mainmodulejs. Sadly, running the 
program yields the results shown in the figure 
accompanying this step. 


Le O] Elements Console Sources Network Performance » @2 : xX 
[>] © top Vv | Filter Default levels ¥ Group similar 2% 
© Uncaught ReferenceError: puber is not defined worker.htm:5 
at worker.htm: 
© Access to Script at ‘file:///home/tamhan/t m i worker.htm:1 
Madules/1/mainmodule.js' from origin ‘null" has been blocked by CORS 
policy: Invalid response. Origin ‘null* is therefore not allowed access. 

> 
4. Break out 


As mentioned in the introduction, one of the most 
Significant benefits of modularisation is the capability to 
compartmentalise programs cleanly. Due to that, we 
need to export the functions needed by adding the 
export statement below. Then, proceed to running the 
website once again. 

export function puber(){ 

console. log(“puber() says Hello!”); 
3 


5. Fix the CORS issues 


Like most other dynamic content, ECMAScript is also 
Subject to various methods of origin confirmation. When 
working on an unixoid system, Python provides a nice 
workaround - simply enter the command shown 
accompanying this step to spin up a little web server. 

H sudo python -m SimpleHTTPServer 8@ 


MODULE A 


MODULE B 


Developer tutorials 


6. Imports, redux 

Inserting a random <script> tag to load a module is not 
enough to get our program working. If two modules 
would expose a function with the same name, a 
namespace collision would occur according to the 
scheme shown in the image below. 


7. A question of need isa 

question of taste! 

Including elements directly and into a namespace of its 
own has its merits. However, namespace contention is 
proportional to project size. Thus, large projects are 
well-advised to avoid direct includes to prevent problems 
as the amount of library code increases. 


8. Limited include 
As afirst ‘revision, let us load the module into the 
‘TamsModule’ namespace. This requires no changes in 
the module file - instead, modify the worker harness'’s 
code as shown in the listing accompanying this step. 
<body> 
<script type=”module” src=”./mainmodule. 
js”></script> 
<script type=”module”> 
import * as TamsModule from “./mainmodule. 
Js”; 
TamsModule.puber() ; 


What about Node.JS? 


Developers who use Node-based modules 
typically use the CommonJS (www.commonjs. 


org) syntax. However, the Node modules 
working group is working on adding ES module 
support to Node.js. 


Left 

If modules would be 
loaded globally, the 
red function tiles 
would collide 
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</script> Te oO] Elements Console Sources Network Performance » - x 
</body> 7 
Tl 8 top Vv | Filter Default levels ¥ #) Groupsimilar 
9. General include puber() says Hello! mainmodule.js:2 
The second option loads the module part into the global > | 


namespace. This does not preclude you from loading 
additional parts into other namespaces - keep in mind 
that each module file gets parsed when it gets addressed 
the first time. This caching lets you save HT TP latency, 
thereby increasing application performance. 

<body> 

<script type=”module” src=”./mainmodule. 


js”></script> 


<script type=”module”> } from “module-name” ; 12. Create a singleton 
import { puber } from “./mainmodule. js”; import defaultExport, * as name from While the export statement can also be applied to a class, 
puber() ; “module-name” ; in some cases, creating a ‘common’ singleton in the 
</script> import “module-name” ; module itself can be convenient. For this, let us start out 
</body> with another test harness which emits a message during 
11. Check encapsulation loading and furthermore adds some state variables. 
10. Even more includes In the next step, let us verify that our module’s content var myName=”” ; 
Opening the Modules feature documentation at https:// really is private. For this, we create a second, var myWeight=0; 
developer.mozilla.org/en-US/docs/Web/JavaScript/ non-exported function which gets called from the test console. log(“Singleton global load done!”); 
Reference/Statements/import reveals almost a dozen harness. When invoked via puber(, all is fine - invoking 
different include syntaxes, all of which are demonstrated foo directly will lead to a permission denied error likethe 13. Add accessory functions 
in action. one shown in the screenshot below. While we could simply put an export in front of the 
import defaultExport from “module-name” ; export function puber(){ member variables, this allows users to wreak havoc inside 
import * as name from “module-name” ; console. log(“puber() says Hello!”); them. Instead, we will implement a set of functions which 
import { export } from “module-name” ; foo); marshal the values of myName and myWeight into and 
import { export as alias } from “module- } out of the module. Incidentally, the length of the getter 
name” ; function foo(){ functions for local variables is a common eyesore - look 
import { exportl , export2 } from “module- console. log(“foo() also says Hello!”); at https://stackoverflow.com/questions/44757177/ 
name” ; ; how-to-export-getter-in-es6-module-system for a 
import { exportl , export2 as alias2 , 
[...] } from “module-name” ; Le A | Elements Console Sources Network Performance » 0 1 - xX 
HORE Pen SUn Ee POr Es: oe A POP ET gn Gada (>| © top v | Filter Default levels ¥ ) Groupsimilar % 


© Uncaught SyntaxError: The requested module *./mainmodule.js' does worker.htm:1 
not provide an export named ‘foo' 


./ is life 


Simply passing in the file name of the module in ? 
question is not allowed in most browsers. Instead, 

use ./ to inform the loader that the file lives in the 

current folder. 


Right 
Mozilla recently Jump to: 
added support for 

modules. Make sure 


to check out the Web technology for developers > JavaScript > The import statement is used to import bindings which are exported by another 
first-class . JavaScript reference > module. 
documentation Statements and declarations > import 


[J This feature is only implemented natively in Safari, Chrome, and Edge at this 


a time. It is implemented in many transpilers, such as the » Traceur Compiler, 
JavaScript Babel, and Rollup. 
Tutorials: 


> Complete beginners 
>» JavaScript Guide 
>» Intermediate 


» Advanced Syntax 
References: 


>» Built-in objects l 
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JavaScript modules via script tag B-ts 


Loading JavaScript module scripts using <script 
Includes support for the nomodule attribute. 


Show all 


IE Edge Firefox 


A question of support 

Traditionally, new JavaScript technologies need 
quite a bit of time before reaching wide-scale 
market acceptance. As quite some time has gone 
by since ECMAScript modules first saw the day, they 
have achieved somewhat wide-ranging industry 


67.52% + 1.31% = 68.83% 
type="module"> 
.. * Chromefor UC Browser for Samsung 
Chrome Safari iOS Safari Opera Mini Android heiciel enor 


support. The latest versions of Edge, Chrome and 
Safari all support modules out of the box, and 
Mozilla has finally joined the party with the recent 
release of Firefox 60. This ensures that browser 
support is now applicable to all the major vendors. 
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Sage % Of all users + 


Global 


Furthermore a set of ‘adapter systems’ are 
available. They let developers wrap ECMAScript 
modules into a more ‘compatible’ way, allowing the 
code to be reused on older platforms. 

Check out https://caniuse.com for latest updates. 


discussion of the topic. 

export function getName(){ 
return myName; 

J 

export function getWeight(){ 
return myWeight; 

i 

export function setName (what) { 
myName=what ; 

} 

export function setWeight(what){ 
myWeight=what; } 


14. Spin it 
Our test code loads the module twice; once into the 


‘TamsModule namespace, and once into the namespace 
‘TamsModule2”. The changes made in the ‘TamsModule’ 


instance will also propagate into ‘TamsModule2’ - this can 
easily be verified by looking at the output of the program 
in the console. Incidentally, this behaviour is caused by 
the above-mentioned caching system, which loads the 
module but once for each page 

import * as TamsModule from “./mainmodule. 

ds”; 

console. log(TamsModule. getName()) ; 

TamsModule.setName(“Its a name’); 

import * as TamsModule2 from “./mainmodule. 

13° 5 

console. log(TamsModule2. getName ()) ; 


15. Export classes quickly 

Should you create a module which contains one class, 
setting a default export is a particularly neat way to 
simplify access. In particular, the two code snippets 


accompanying this step demonstrate both the use of the 
‘export default’ attribute and inclusion of the class into a 
worker or a test harness. The file name workers, 
incidentally, is not a typo - the ECMAScript module 
system also supports JavaScript-onJavaScript includes. 
TamsClass.js 


export default class { ... }; 
worker.jS ------ 
import TamsClass from ‘filename’ ; 


let aClass = new TamsClass(); 


16. Eliminating latency 

With that out of the way, let us return to our singleton. It 
contains some global code, which gets run during the 
initialisation of the program. At this point, an interesting 
question remains - how does the JavaScript runtime 
handle delays caused by network latencies? 


ke Ol Elements 
ir] © 


Defer Inline Script l 


top 


Inline Script l 
Defer Inline Script 2 


Console 


Sources Network 


¥ Filter 


Singleton global Load done! 
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worker.htm: 13 
worker.htm: 16 
worker.htm:19 


mainmodule.js:23 
worker.htm: ? 


worker.htm: 10 
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Right 
The advanced _ C @ 
rendering settings 
display can be 
filtered using the 
text box at the top 


of the screen Preference Name 


dom.moduleScripts.enabled 


17. Check it out 


Some questions are best answered with a little test. Thus, 
replace the worker code in our testing harness with the 
one accompanying this step - it contains the singleton 
operations, and also a few ‘local’ script blocks. Run it, or 
take a look at the rendered output in the figure 
accompanying this step. 
<script type=”module” src=”./mainmodule. 
js”></script> 
<script type=”module”> 
import * as TamsModule from “./mainmodule. 
133 
console. log(TamsModule. getName()) ; 
TamsModule.setName(“Its a name’); 
import * as TamsModule2 from “./mainmodule. 
Iss 
console. log(TamsModule2. getName ()) ; 
</script> 
<script defer> 
console. log(“Defer Inline Script 1”); 
</script> 
<script defer> 
console.log(“Inline Script 1”); 
</script> 
<script defer> 
console.log(“Defer Inline Script 2”); 
</script> 


18. Understand the hierarchy 

Script tags equipped with the module attribute are 
assigned a lower execution priority, which - at the time of 
writing - can not be modified by the developer. Basically, 
a module script is always equipped with a defer 
command - treat it like any other valid use of the defer 
order in a script tag. 


19. Beat the module 


The above-mentioned inclusion of the type="module’” 
String is not born from malevolence on the side of the 
ECMAScript standardisation. Instead, it uses a peculiarity 
of HTML - browsers ignore script tags with unknown 
types. This permits the use of the following fallback 
Structure, which is supported by quite a few browsers. 
Alternatively, an even better - albeit quite involved - 
workaround can be found at https://medium.com/ 
dev-channel/es6-modules-in-chrome-canary-m60- 
ba588dfb8ab7 

BH <script type=”module” src=”has-modules.js’> 
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© Firefox about:config wv Search 


« Status Type Value 


default boolean False 


21. Work with Firefox 


</script> 
<script nomodule src=”has-no-modules. js”> 
</script> 


i, G » 


Search: | © moduleScripts| @ 


Firefox provides developers with a set of first-class 
developer tools. If you want to use Mozilla’s browser for 
debugging and testing module-based programs, fret not. 


as) 


Simply open the website about:config, and look for the 


20. eval isn’t ideal 


While the use of evalO is not to everyone's liking, the 
number one source of weird program behaviour remains 
in widespread use. Sadly, code passed to eval() is not 
allowed to interact with functions or other elements 
exported from modules. This odd limitation is caused by 
the underlying loader, and is part of the standard. 


16. Modules 


- one restart, and all is golden. 


22. Find out more 


https://bit.ly/2w2iLft for a deep dive. 


e 16.1. Overview 
o 16.1.1. Multiple named exports 
o 16.1.2. Single default export 
° 16.1.3. Browsers: scripts versus modules 
e 16.2. Modules in JavaScript 
o 16.2.1. ECMAScript 5 module systems 
° 16.2.2. ECMAScript 6 modules 
e 16.3. The basics of ES6 modules 
o 16.3.1. Named exports (several per module) 
° 16.3.2. Default exports (one per module) 
© 16.3.3. Imports and exports must be at the top level 
© 16.3.4. Imports are hoisted 
o 16.3.5. Imports are read-only views on exports 
o 16.3.6. Support for cyclic dependencies 
e 16.4. Importing and exporting in detail 
o 16.4.1. Importing styles 
o 16.4.2. Named exporting styles: inline versus clause 
°o 16.4.3. Re-exporting 
© 16.4.4. All exporting styles 


One of the best resources/discussions of the module 
system can be found as part of Exploring JS. Head to 


attribute dom.moduleScripts.enabled. Next, set it to true 


© 16.4.5. Having both named exports and a default export in a 


module 
e 16.5. The ECMAScript 6 module loader API 
© 16.5.1. Loaders 
o 16.5.2. Loader method: importing modules 
o 16.5.3. More loader methods 
° 16.5.4. Configuring module loading 
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Featured host: Netcetera 


netcetera.co.uk 
03330 439780 


About us 


Formed in 1996, Netcetera is one of 
Europe's leading web hosting service 
providers, with customers in over 75 
countries worldwide. 

As the premier provider of 
data centre colocation, cloud hosting, 
dedicated servers and managed web 
hosting services in the UK, Netcetera 
offers an array of services designed to 
more effectively manage IT 


What we offer 
- Managed hosting - A full 
range of solutions for a cost- 
effective, reliable, secure host. 


- Cloud hosting - Linux, 
Windows, Hybrid and Private 
Cloud Solutions with support 
and scalability features. 


5 tips from the pros 

1. Reliability, trust & support 
Reliability is a major factor when it 
comes to choosing a hosting partner. 
Netcetera guarantees 100 per cent 
uptime, multiple internet routes with 
the ability to handle DDOS attacks, 
ensuring your site doesn't go down 
when you need it. 


2.Secure and dependable 
Netcetera prides itself on offering its 
clients a secure environment. 

It is accredited with ISO 27001 for 
security along with the options of 
configurable secure rackspace available 
in various configurations. 


3. 24/7 technical support 


Netcetera has a committed team of 


infrastructures. A state-of-the-art data 
centre environment enables Netcetera 
to offer your business enterprise-level 
colocation and hosted solutions. 
Providing an unmatched value for your 
budget is the driving force behind our 
customer and managed infrastructure 
services. From single server to fully 
customised data centre suites, we focus 
on the IT solutions you need. 


- Data centre colocation - 
Single server through to full 
racks with FREE setup and a 
generous bandwidth. 


- Dedicated servers - From 
QuadCore up to Smart Servers 
with quick setup and 
fully customisable. 


knowledgeable staff available 24/7 to 
provide you with assistance when you 
need it most. Our people make sure 
you are happy and your problems are 
resolved as quickly as possible. 


4. Value for money 

We do not claim to be the cheapest 
service available, but we do claim to 
offer excellent value for money. We also 
provide a price match on a like-for-like 
basis, as well as a price guarantee for 
your length of service. 


5. Eco-friendly 

Netcetera’s environmental commitment 
is backed by use of eco-cooling and 
hydroelectric power. This makes 
Netcetera one of the greenest data 
centres in Europe. 
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One of the greenest and most efficient 
Datacentrés in the UK. 
#ZeroCarbonDatacentre 


Learn More 


Netcetera Hosting 


Our Services 


Testimonials 

Roy T 

“ have always had great service from Netcetera. Their technical support is 
second to none. My issues have always been resolved very quickly. 


Suzy B 

“We have several servers from Netcetera and their network connectivity is 
top-notch, with great uptime and speed is never an issue. Tech support is 
knowledgeable and quick in replying. We would highly recommend Netcetera. 


Steve B 

“We put several racks into Netcetera, basically a complete corporate backend. 
They could not have been more professional, helpful, responsive or friendly. All 
the team were an absolute pleasure to deal with, and nothing was too much 
trouble, so they matched our requirements 100 per cent.” 


Supreme hosting 


OCWCS bees Sees, 
MANAGED HOSTING 

Cwcs.co.uk 

08001777000 

CWCS Managed Hosting is the UK’s 
leading hosting specialist. They offer a 
fully comprehensive range of hosting 
products, services and support. Their 
highly trained staff are not only hosting 
experts, they're also committed to 
delivering a great customer experience 
and are passionate about what they do. 


- Colocation hosting 


- VPS 
- 100 per cent network uptime 


Uk-based hosting 


<¢¢ CYBERHOST 


cyberhostpro.com 

0845 5279 345 

Cyber Host Pro are committed to 
providing the best cloud server 
hosting in the UK; they are obsessed 
with automation. If you're looking for a 
hosting provider who will provide you 
with the quality you need to help your 
business grow, then look no further 
than Cyber Host Pro. 


¢- Cloud VPS servers 
- Reseller hosting 
- Dedicated servers 


Cluster web hosting 


fasthosts 


fasthosts.co.uk 

0808 1686 777 

UK-based and operating 24/7 from 
dedicated UK data centres. Fasthosts 
keep over one million domains running 
smoothly and safely each day. Services 
can be self-managed through the 
Fasthosts Control Panel. 


- Dedicated servers 
- Cloud servers 
« Hosted email 


Budget hosting 


HE TZMNER 


ONLINE 


hetzner.com 

+49 (0)9831505-O0 

Hetzner Online is a professional web 
hosting provider and experienced data 
centre operator. Since 1997, the company 
has provided private and business clients 


All-inclusive hosting 


land1.co.uk 

0333 336 5509 

1&1 Internet is a leading hosting 
provider that enables businesses, 
developers and IT pros to succeed 
online. Established in 1988, 1&1 now 


with high-performance hosting products 
as well as the infrastructure for the 
efficient operation of sites. A combination 
of stable technology, attractive pricing, 
flexible support and services has enabled 
Hetzner Online to strengthen its market 
position nationally and internationally. 


- Dedicated/shared hosting 
¢« Colocation racks 
- SSL certificates 


operates across ten countries. With a 
comprehensive range of high- 
performance and affordable products, 1&1 
offers everything from simple domain 
registration to award-winning website 
building tools, eCommerce packages and 
powerful cloud servers. 


- Easy domain registration 
- Professional eShops 
- High-performance servers 


SSD web hosting 


<>bargainhost 


bargainhost.co.uk 

0843 289 2681 

Since 2001, Bargain Host have 
campaigned to offer the lowest possible 
priced hosting in the UK. They have 
achieved this goal successfully and built 
up a large client database, which includes 
many repeat customers. They have also 
won several awards for providing an 
outstanding hosting service. 


- Shared hosting 
- Cloud servers 
« Domain names 


Value Linux hosting 


PATCHMAN 
WEB HOSTING 


patchman-hosting.co.uk 
01642 424 237 

Linux hosting is a great solution for 
home users, business users and web 
designers looking for cost-effective and 
powerful hosting. Whether you are 
building a single-page portfolio, or you 
are running a database-driven 
eCommerce website, there is a Linux 
hosting solution for you. 


- Student hosting deals 
- Site designer 
- Domain names 


Flexible cloud servers 


elastichosts 


elastichosts.co.uk 

020 7183 8250 

ElasticHosts offer simple, flexible and 
cost-effective cloud services with 
high performance, availability and 
scalability for businesses worldwide. 
Their team of engineers provide 
excellent support 24/7 over the phone, 
by email and with a ticketing system. 


- Cloud servers with any OS 
- Linux OS containers 
- 24/7 expert support 
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Featured: 


ORTH Northcoders 
C O D [= FR S tiie Ga aes 


Facebook: Northcoders 


Northcoders is the coding bootcamp full-time bootcamp, or fit their course 


for the north, based in the heart of around your life with their 24-week 
Manchester and built upon northern part-time bootcamp. Their internal 
values of grit, determination and career support team will help find you 
community spirit. No matter what work as a developer, setting up 

your background, you can fast-track interviews with your choices of 

your career and become a web or Northcoders Hiring Partners across 


software developer in 12 weeks at their the north of England. 


e Full-time: e Part-time: 
Fast-track your Career Fit our Curriculum around 
in just 12 weeks. your life in 24 weeks. 

1. Get started with coding for you, set aside a few evenings 

The best way to know if coding each week to really start making 

is for you is to just try it! We progress! If coding is for you, 

recommend the free, online this should be fun. 

JavaScript track of 

Codecademy to get you 4.Be prepared 

Started with the basics. We'll be with you every step of 
the way when you apply. Make 

2.Do your research Sure you go through all the 

Make sure you read plenty materials we recommend and 

of student reviews to make ask for help if youre stuck. 

sure youre applying 

somewhere reputable. Read 5. Get social 

their blog and have a look at With Northcoders, youre not 

their social channels. just on a course, youre part of a 
community that will stay with 

3. Throw yourself in you long after you graduate. 


Once you've decided it’s right Make the most of it! 


Becoming part of this vibrant, caring community was 
something | hadn't expected before the course, but 
now | couldn't be without it. To be a Northcoder is to 
be enlightened, inspired and supported. 

Joanne Imlay 

Primary school teacher to software developer at Careicon 
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66 Vo matter what your 
background, you can 
fast-track your career and 
become a web or software 
developer in 12 weeks 99 


Become a software 
developer in just 
12 weeks 


<Learn to code - in just 12 weeks /> 
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Northcoders delivered their part of the bargain in spades. 
They provided tremendous assistance in turning me into 
the full product - a well-rounded, capable, future tech 
employee - and they have the contacts to deliver the 
opportunities for such people. 

Joe Mulvey 

Maths teacher to software developer at Auto Trader 


udemy 


UDEMY 


udemy.com 


Twitter:@udemy 


Facebook: udemy 


The inspiration for Udemy beganina 
small village in Turkey, where founder 
Eren Bali grew up frustrated by the 
limitations of being taught ina 
one-room school house. Realising Swe 
the potential of learning on the internet, os pak suns Deereeees 
he set out to make quality education ) | 
more accessible. Udemy is now a 
global marketplace for learning and 
teaching online. Students can master 
new skills by choosing from an 
extensive library of over 40,000 
courses including HTML, CSS, UX, 
JavaScript and web development. 


40,000+ courses: There isa 
course for every designer and dev. 
Self-paced learning: Learn how 
to code at your own pace. 


THE 
IRON YARD 


theironyard.com 


Twitter.@ThelronYard 
Facebook: ThelronYard 


The Iron Yard is one of the world’s 


largest and fastest-growing in-person 3 =. 
code schools. It offers full-time and Weer ee! 
parttime programs in backend rae ‘ 


engineering, frontend engineering, 
mobile engineering and design. The 
lron Yard exists to create real, lasting 
change for people, their companies 
and communities through technology 
education. The in-person, immersive 
format of The Iron Yard’s 12-week 
courses helps people learn to code 
and be prepared with the skills needed 
to start a career as junior-level 
software developers. 


12-week code school: Learn 
the latest skills from industry pros. 
Free crash courses: One-night 3 
courses, the perfect way to learn. 


THE BLACK FRIDAY 


°°. BINGE LEARN 


Get your learning lineup ready. 
#BingeLearn with $13 courses today. 
Prices increase every other day. 
ALE ENDS 11:59 PM PST ON 11/25 


WEGOT CODERS 


‘2 WE GOT CODERS 


wegotcoders.com 
hello@wegotcoders.com 

We Got Coders is a consultancy that 
provides experts in agile web 
development, working with startups, 
agencies and government. Take one of 
their 12-week training courses that covers 
all that is required to become a web 
developer, with highly marketable 
full-stack web development skills. 


- Classroom-based training 
- Real-world work experience 
- Employment opportunities 


FUTURELEARN 


Future 
Learn 


futurelearn.com 
feedback@futurelearn.com 
Choose from hundreds of free online 
courses, from Language & Culture to 
Business & Management; Science & 
Technology to Health & Psychology. 
Learn from the experts. Meet educators 
from top universities who'll share their 
experience through videos, articles, 
quizzes and discussions. 


- Learn from experts 


- Free courses 
- All-device access 


GYMNASIUM 


GYMNASIUM 


thegymnasium.com 
help@thegymnasium.com 
Gymnasium offers free online courses, 
designed to teach creative 
professionals in-demand skills. 
Courses are all self-paced and taught by 
experienced practitioners with a passion 
for sharing practical lessons from the 
design trenches. 


« Gain real-world skills 


- Get expert instruction 
- Career opportunities 
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Free with 


your magazine 


Essential assets 
and resources 


Get textures, fonts, 
backgrounds and more 


SPECTRAL 


To Log in to www-filesilo.co.uk/webdesigner 


Register to get instant access 
to this pack of must-have 
creative resources, how-to 
videos and tutorial assets 


Exclusive Tutorial 
video tutorials project files 


Learn to code/create with All the assets you'll need 
HTML, CSS, JS & PHP to follow our tutorials 


Cera 
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Plus, all of this 
is yours too... 


- All-new tutorial files to help you 


master this issue’s HTML, CSS 
and JavaScript techniques 


* Over 107 minutes of Beginners 


JavaScript video from StudioWeb 
(www.studioweb.com) 


* 6 Gold clothespin-style card 


mockups and 14 Midnight 
Photoshop filters 

from Sparklestock 
(www.sparklestock.com) 


[ ay 
AY 


™ af £ 
: "Co, } . 
IMAGEs 


~ ae \ 4 

ES io SSE | ‘CON Packs - : 
ORIAL Fives UD —— SS / 2 

if Ree ED ofl 


r 
UTORIALs o;— ( 
WoRDpp-e 
RESS Typ 
"5 THEMEs 
es 


The home of great 
downloads — exclusive to 
your favourite magazines 
from Future! 


8 Secure and safe online 
access, from anywhere 


8 Free access for every 
reader, print and digital 


8 Download only the files 
you want, when you want 


8 All your gifts, from all your 
issues, in one place 


Everything you need to 
know about accessing 
your FileSilo account 


Register 
Please fi 


‘ill out the form below. 


Follow the instructions 
on screen to create an 


account with our secure FileSilo Subscribe today & Tlal(eve.4 the free 


system. Log in and unlock the 
al wt Z 
mendes gifts from more than 50 issues 


NXONNS 


Over 60 hours More than Over 250 
of video guides 400tutorials creative assets 


You ca 

on any computer, tablet 
or smartphone device using any 
popular browser. However, we 
recommend that you use a 
computer to download content, DEVELOPMENT 
as you may not be able to 
download files to other devices. 


Designing the animation test environment 


Head to page 34 to subscribe now 


If you have any 


problems with (a) Already a print subscriber? +} 
accessing content on FileSilo, 4 More 
takea look at the FAQs online Unlock the entire Web Designer FileSilo library with your added 
or email our team at the unique Web ID — the ten-digit alphanumeric code printed above eve 
address below. your address details on the mailing label of your subscription issue 


filesilohelp@futurenet.com copies — also found on any renewal letters. 


NEAT MONTH 


AUGMENTED 
REALITY 


BUILD YOUR 
OWN APP 


A practical guide to the best frameworks, tools and 
techniques needed to create your own project 


GET STARTED | CODEACUSTOM © GOOGLE ANALYTICS 
WITH THREEJS : WEB COMPONENT : 2018 — WHAT'S NEW? 
Carn NOW to Create apps and components ; CLAN INSIQNUINGS Ine latest UPGales and Ieatures 


and how to make the most of them 


The first in a five-part series takes you through the ; 


basics needed to start building with the library based on web standards with Stencil.js 


Visit the WEB DESIGNER online shop at EASES O(@E Say GI 
myfavouritemagazines 
myfavouritemagazines.co.uk [ESE e ie) ais) [= 

for the latest issue, back issues and specials SUPE: & 745 uN de] fs) 
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98 next month 


Mockup, wireframe, diagram, prototype 
& collaborate with one flexible solution. 
moqups.com 


ies This is the moment 
when a click 


turns into a lead. 


PRESS AHEAD 


WP Engines digital experience platform drives your business forward faster. wpengine.co.uk WP CNQ Ine’ 


